safari下文字框關閉IME輸入法的一些實現思路

2021-06-07 03:05:50 字數 2076 閱讀 6331

最近對手機版的web程式做維護,leader覺得登陸框的輸入法切換很麻煩,非英文下能不能自動關閉呢?花了一天時間,做了個小調查,並且簡單實現了一下,不是很完美,因為發現android下效果沒有很好。

我們都知道在ie下,可以直接使用css的ime-mode來控制和關閉輸入法,firefox也是支援的。唯獨safari和chrome這樣的使用webkit核心的瀏覽器沒有支援這個屬性。

想到safari和chrome都是支援html5的,所以嘗試了一下input標籤的各種type,觀察預設鍵盤的變化。

input type

iefirefox

opera

chrome

safari

說明email

no4.0

9.010.0

noiphone 中的 safari 瀏覽器支援 email 輸入型別,並通過改變觸控螢幕鍵盤來配合它(新增 @ 和 .com 選項)。

urlno

4.09.0

10.0

noiphone 中的 safari 瀏覽器支援 url 輸入型別,並通過改變觸控螢幕鍵盤來配合它(新增 .com 選項)。

number

nono

9.07.0

noiphone 中的 safari 瀏覽器支援 number 輸入型別,並通過改變觸控螢幕鍵盤來配合它(顯示數字鍵盤)。

range

nono

9.04.0

4.0date pickers

nono

9.010.0

nosearch

no4.0

11.0

10.0

nocolor

nono

11.0

nono

沒有特別合適的可以替代text文字框的,於是目光轉移到了password文字框。password是被限定了輸入法的,絕大部分瀏覽器都讓這個文字框只支援英文輸入法。所以實現的思路來了:我用乙個password來替代原來的text,讓這個文字框透明並且不顯示顏色。再在這個password下面放置乙個層,用於同步顯示打出來文字,這樣就簡單模擬出了乙個只能輸入半形字元的text文字框。

html和樣式:

input

.imecontrol

.imecontrol_others

.imecontrol_ie

.imecontrol_viewer

#imecontrolor

半形文字:	

簡單實現的js**:

var imecontrol = ,

inputobject : null,

inputid : "inputghost",

viewertag : "imeviewer",

viewertagclass: "imecontrol_viewer",

viewer :null,

interval : 24,

timer : null,

imekeyfun:function()

,init:function()else

} ,bindkey:function(obj)

if (document.addeventlistener) else if (document.attachevent) else

}} ,$:function (id)

,hasclass : function(element, classname)

,addclass : function(element, classname)

} ,removeclass : function (element, classname)

}}imecontrol.init();

話說回來,這種實現,意義也不是很大,因為使用者其實切換乙個輸入法是很容易的事情,也沒見過多少**的設計師,非得把使用者id的輸入框,整到不能輸半形以外的字元為止,雖然使用者id限制著是乙個半角字串。朋友們如若有更好的實現方法,記得分享哦~

2012.06.13

文字框日曆

建立頭部 document.write 734 8 建立星期條目 document.write for i 0 i 7 i document.write week i document.write 建立日期條目 document.write for i 0 i 6 i document.write ...

文字框排版

文字框排版 我們之前學看文件的排版設定技巧,那麼還有乙個是文字框的排版設定,除了前面介紹到的段落排版以外,我們經常用到的還有文字框的排版,文字框排版在現實當中實踐應用包括了年會主持詞製作手卡的一些工作場景,那麼我們接下來就製作一下,首先在乙個空白文件中我們插入乙個文字框。插入文字框之後,清楚當中的預...

MFC 文字框 用法

mfc裡面的edit control控制項的用法是怎麼樣的,1.怎麼樣才能賦值給edit control控制項並在edit control控制項顯示出來 2.怎麼取得edit control控制項的值並傳遞給乙個變數?希望各位大俠幫幫忙!獲得edit cedit pboxone pboxone ce...