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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值