控制输入法演示

最新推荐文章于 2018-07-09 22:44:43 发布

abxn2002

最新推荐文章于 2018-07-09 22:44:43 发布

阅读量678

点赞数

分类专栏： javascript学习笔记

javascript学习笔记专栏收录该内容

75 篇文章

订阅专栏

转载地址: http://elf8848.iteye.com/blog/1613256

开发一般的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;    
    }   
}