控制输入法演示

最新推荐文章于 2021-09-13 12:28:05 发布

h254532693

最新推荐文章于 2021-09-13 12:28:05 发布

阅读量621

点赞数

分类专栏：前端--CSS

前端--CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

伦理片 http://www.gxuy.com/

演示的截图：

演示的HTML代码如下：

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

    Html代码   
    
  
 <!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、左右键都不让输入了，下面的做了修正，并解决了一项浏览器兼容问题。

    Js代码   
    
  
 //获得事件对象  
 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;    
     }   
 }  

h254532693

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控制输入法演示

开发一般的B/S架构的管理类型应用，都需要大量录入表单。如果能依据输入的内容的类型，智能的切换输入法，那可太人性化了。比如：录入中文姓名时自动换成中文输入法，录入英文名时自动换成英文输入法，录入数字时只有录入1-9。伦理片 http://www.gxuy.com/演示的截图：演示的HTML代码如下：其中使用了js
复制链接

扫一扫