js监控输入密码检测大写键盘是否锁定






[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.         <title>智能营销平台</title>  
  8.       
  9.     </head>  
  10.   
  11.     <body>  
  12.             <div>   
  13.     <input class="text" name="passwd" id="loginPasswd" type="password" style="*display:block;" />   
  14.         <div style="color:#F90;padding:2px; position:absolute; display:none;" id="capital">大写锁定已开启</div>   
  15.     <script type="text/javascript">  
  16.     (function(){   
  17.     var inputPWD = document.getElementById('loginPasswd');   
  18.     var capital = false;   
  19.     var capitalTip = {   
  20.     elem:document.getElementById('capital'),   
  21.     toggle:function(s){   
  22.     var sy = this.elem.style;   
  23.     var d = sy.display;   
  24.     if(s){   
  25.     sy.display = s;   
  26.     }else{   
  27.     sy.display = d =='none' ? '' : 'none';   
  28.     }   
  29.     }   
  30.     }   
  31.     var detectCapsLock = function(event){   
  32.     if(capital){return};   
  33.     var e = event||window.event;   
  34.     var keyCode = e.keyCode||e.which; // 按键的keyCode   
  35.     var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住   
  36.     if (   
  37.     ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开,且没有按住shift键   
  38.     || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开,且按住shift键   
  39.     ){capitalTip.toggle('block');capital=true}   
  40.     else{capitalTip.toggle('none');}   
  41.     }   
  42.     inputPWD.onkeypress = detectCapsLock;   
  43.     inputPWD.onkeyup=function(event){   
  44.     var e = event||window.event;   
  45.     if(e.keyCode == 20 && capital){   
  46.     capitalTip.toggle();   
  47.     return false;   
  48.     }   
  49.     }   
  50.     })()   
  51.     </script>   
  52.     </div>  
  53.   
  54.     </body>  
  55.   
  56. </html>  



[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.         <title>智能营销平台</title>  
  8.       
  9.     </head>  
  10.   
  11.     <body>  
  12.             <div>   
  13.     <input class="text" name="passwd" id="loginPasswd" type="password" style="*display:block;" />   
  14.         <div style="color:#F90;padding:2px; position:absolute; display:none;" id="capital">大写锁定已开启</div>   
  15.     <script type="text/javascript">  
  16.     (function(){   
  17.     var inputPWD = document.getElementById('loginPasswd');   
  18.     var capital = false;   
  19.     var capitalTip = {   
  20.     elem:document.getElementById('capital'),   
  21.     toggle:function(s){   
  22.     var sy = this.elem.style;   
  23.     var d = sy.display;   
  24.     if(s){   
  25.     sy.display = s;   
  26.     }else{   
  27.     sy.display = d =='none' ? '' : 'none';   
  28.     }   
  29.     }   
  30.     }   
  31.     var detectCapsLock = function(event){   
  32.     if(capital){return};   
  33.     var e = event||window.event;   
  34.     var keyCode = e.keyCode||e.which; // 按键的keyCode   
  35.     var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住   
  36.     if (   
  37.     ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开,且没有按住shift键   
  38.     || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开,且按住shift键   
  39.     ){capitalTip.toggle('block');capital=true}   
  40.     else{capitalTip.toggle('none');}   
  41.     }   
  42.     inputPWD.onkeypress = detectCapsLock;   
  43.     inputPWD.onkeyup=function(event){   
  44.     var e = event||window.event;   
  45.     if(e.keyCode == 20 && capital){   
  46.     capitalTip.toggle();   
  47.     return false;   
  48.     }   
  49.     }   
  50.     })()   
  51.     </script>   
  52.     </div>  
  53.   
  54.     </body>  
  55.   
  56. </html>  
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页