控制输入法演示

elf8848

浏览: 7185013 次
性别:
来自: 北京

最近访客更多访客>>

winicecold

zhaoshijie

zhw_0010

xierui54

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端--CSS

作者：赵磊

博客：http://elf8848.iteye.com

开发一般的B/S架构的管理类型应用，都需要大量录入表单。

如果能依据输入的内容的类型，智能的切换输入法，那可太人性化了。

比如：录入中文姓名时自动换成中文输入法，录入英文名时自动换成英文输入法，录入数字时只有录入1-9。

演示的截图：

演示的HTML代码如下：

其中使用了js/jquery.js，你自己加入。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>自动切换输入法演示</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
	
说明：本测试依赖js/jquery.js
<br/><br/><br/><br/>

----JS控制输入内容演示---- <br/>
原始的文本框：<input type="text" class=""/> <br/>
只允许输入数字和小数点：<input type="text" class="checkNum" />（js实现）


<br/><br/><br/><br/>
----CSS控制输入法演示---- <br/>
请注意输入法的变化<input type=text size=20 style="ime-mode:auto;" value="">style="ime-mode:auto;" auto 代表打开输入法 (默认)<br>  
请注意输入法的变化<input type=text size=20 style="ime-mode:active;" value="">style="ime-mode:active;" active 代表输入法为中文<br>  
请注意输入法的变化<input type=text size=20 style="ime-mode:inactive;" value="">style="ime-mode:inactive;" inactive 代表输入法为英文<br>  
请注意输入法的变化<input type=text size=20 style="ime-mode:disabled;" value="">style="ime-mode:disabled;" disable 代表关闭输入法<br> 
<br/><br/>

<script type="text/javascript">
//监听键盘，只允许输入数字和小数点   
$(".checkNum").keypress(function(event) { 
    var keyCode = event.which;   
    if (keyCode == 46 || (keyCode >= 48 && keyCode <=57))   
        return true;   
    else  
        return false;   
}).focus(function() {   
    this.style.imeMode='disabled'; 
}); 

//auto:默认值。不影响IME的状态。与不指定 ime-mode 属性时相同 
//active:指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME 
//inactive:指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME 
//disabled:完全禁用IME。对于有焦点的控件(如输入框)，用户不可以激活IME 

//auto 代表打开输入法 (默认)
//active 代表输入法为中文
//inactive 代表输入法为英文
//disable 代表关闭输入法

</script>
</body>
</html>

修正：

上面的JS目的是控制只能输入数字，结果连退格、del、左右键都不让输入了，下面的做了修正，并解决了一项浏览器兼容问题。

	//获得事件对象
	function getEventObject(){
		if(window.event) return window.event;
	    var f=getEventObject.caller;
	    while(f!=null)
	    {
	        var e = f.arguments[0]; 
	        if(e && (e.constructor==MouseEvent||e.constructor==Event||e.constructor==KeyboardEvent)) return e;
	              
	        f=f.caller;
	    }
	    return null;
	};
	//只能输入数字
	function checkInputPageNumber(){
		var event=getEventObject();
		var keyCode = event.keyCode||event.which||event.charCode; 
	    if (keyCode==8|| keyCode==46 ||(37 <= keyCode && keyCode <=40) || (48 <= keyCode && keyCode <=57)){
	    	return true;   
	    }else{
	    	return false;  
	    } 
	}