safari下文本框关闭IME输入法的一些实现思路

最近对手机版的web程序做维护，Leader觉得登陆框的输入法切换很麻烦，非英文下能不能自动关闭呢？花了一天时间，做了个小调查，并且简单实现了一下，不是很完美，因为发现Android下效果没有很好。

我们都知道在IE下，可以直接使用CSS的ime-mode来控制和关闭输入法，Firefox也是支持的。唯独safari和Chrome这样的使用webkit内核的浏览器没有支持这个属性。

想到safari和Chrome都是支持HTML5的，所以尝试了一下input标签的各种type，观察默认键盘的变化。

Input type	IE	Firefox	Opera	Chrome	Safari	説明
email	No	4.0	9.0	10.0	No	iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
url	No	4.0	9.0	10.0	No	iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
number	No	No	9.0	7.0	No	iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字键盘）。
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

没有特别合适的可以替代text文本框的，于是目光转移到了password文本框。password是被限定了输入法的，绝大部分浏览器都让这个文本框只支持英文输入法。所以实现的思路来了：我用一个password来替代原来的text，让这个文本框透明并且不显示颜色。再在这个password下面放置一个层，用于同步显示打出来文字，这样就简单模拟出了一个只能输入半角字符的text文本框。

HTML和样式：

input{
width:300px;
height:17px;
}
.IMEControl{
font:normal 14px "Courier New", Courier, monospace;
border:1px solid #cccccc;
padding:2px;
width:300px;
height:17px;
outline: none;
}
.IMEControl_Others {
position:absolute;
color: transparent;
margin:0;
line-height:50px;
outline:none;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity: 0;
z-index:999;
background:none;
overflow:hidden;
vertical-align:bottom;
}
.IMEControl_IE {
ime-mode:disabled;
width:300px;
height:17px;
}
.IMEControl_Viewer {
font:normal 14px "Courier New", Courier, monospace;
border:1px solid #ccc;
position:absolute;
padding:2px;
margin:0;
z-index:998;
overflow:hidden;
width:300px;
height:17px;
}
#IMEControlor{
margin:0;
overflow:hidden;
width:306px;
height:23px;
}

半角文字：
<div id = "IMEControlor">
<input name="" type="text" id="inputGhost" maxlength="30" class="IMEControl" />
</div>

简单实现的js代码：

var IMEControl = {
IOS : function() {
var u = navigator.userAgent.toLowerCase();
return (u.indexOf('iphone') > 0 || u.indexOf('ipod') > 0|| u.indexOf('ipad') > 0 || u.indexOf('ipad') > 0
)? true : false },
InputObject : null,
InputID : "inputGhost",
ViewerTag : "IMEViewer",
ViewerTagClass: "IMEControl_Viewer",
Viewer :null,
interval : 24,
timer : null,
ImeKeyFun:function(){
IMEControl.Viewer = IMEControl.$(IMEControl.ViewerTag);
if(IMEControl.Viewer != null && IMEControl.Viewer.nextSibling != null)
IMEControl.Viewer.innerHTML = IMEControl.Viewer.nextSibling.value;
}
,init:function(){
var obj=IMEControl.$(IMEControl.InputID);
IMEControl.InputObject = obj;
if(IMEControl.IOS()){
obj.type= "password";
IMEControl.addClass(obj,"IMEControl_Others");
IMEControl.Bindkey(obj);
IMEControl.ImeKeyFun();
}else{obj.className = "IMEControl_IE";}
}
,Bindkey:function(obj) {
var _IMEViewObj=IMEControl.$(IMEControl.ViewerTag);
if( _IMEViewObj == null ) {
var _IMEViewObj = document.createElement("div");
_IMEViewObj.id = IMEControl.ViewerTag;
_IMEViewObj.className= IMEControl.ViewerTagClass;
obj.parentNode.insertBefore(_IMEViewObj,obj);
obj.focus();
}
if (document.addEventListener) {
obj.addEventListener("keyup", IMEControl.ImeKeyFun, true);
} else if (document.attachEvent) {
obj.attachEvent("onkeyup", IMEControl.ImeKeyFun);
} else {
if (obj.onkeyup) obj.onkeyup = function () {IMEControl.ImeKeyFun();}
}
}
,$:function (id) { return (typeof (id)=='object')?id:document.getElementById(id); }
,hasClass : function(element, className){
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg);
}
,addClass : function(element, className) {
if (!IMEControl.hasClass(element, className)){
element.className = (element.className == "" ? className :element.className + " " + className);
}
}
,removeClass : function (element, className) {
if (IMEControl.hasClass(element, className)) {
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,' ');
}
}

}
IMEControl.init();

话说回来，这种实现，意义也不是很大，因为用户其实切换一个输入法是很容易的事情，也没见过多少网站的设计师，非得把用户ID的输入框，整到不能输半角以外的字符为止，虽然用户ID限制着是一个半角字符串。朋友们如若有更好的实现方法，记得分享哦~

2012.06.13