1. <html>
  2.     <head>
  3.         <title>CapsLock Demo</title>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script>
  5.         <script src="./CapsLock.js?ver=1.0" type="text/javascript" charset="utf-8"></script>
  6.         <script type="text/javascript">
  7.             window.addEvent('domready', function() {
  8.                 var pass = document.id('passcapsnotice'),
  9.                     user = document.id('usercapsnotice');
  10.  
  11.                 function passCapsOn()  { pass.setStyle('display', 'block'); }
  12.                 function passCapsOff() { pass.setStyle('display', 'none'); }
  13.  
  14.                 function userCapsOn()  { user.setStyle('display', 'block'); }
  15.                 function userCapsOff() { user.setStyle('display', 'none'); }
  16.  
  17.                 document.id('username').addEvents({
  18.                     'capsLockOn': userCapsOn,
  19.                     'capsLockOff': userCapsOff,
  20.                     'blur': userCapsOff,
  21.                     'focus': function(event) {
  22.                         if (event.hasCapsLock()) { userCapsOn(); }
  23.                     }
  24.                 });
  25.  
  26.                 document.id('password').addEvents({
  27.                     'capsLockOn': passCapsOn,
  28.                     'capsLockOff': passCapsOff,
  29.                     'blur': passCapsOff,
  30.                     'focus': function(event) {
  31.                         if (event.hasCapsLock()) { passCapsOn(); }
  32.                     }
  33.                 });
  34.  
  35.             });
  36.         </script>
  37.         <style type="text/css">
  38.         form {
  39.             width: 500px;
  40.             margin: 0 auto;
  41.         }
  42.         .label { width: 60px; }
  43.         .field { width: 260px; }
  44.         .notice {
  45.             display: none;
  46.             line-height: 2em;
  47.             margin-top: .5em;
  48.             padding: 0;
  49.         }
  50.         </style>
  51.     </head>
  52.  
  53.     <body>
  54.         <form>
  55.             <fieldset>
  56.                 <legend>Login</legend>
  57.                 <table>
  58.                     <tbody>
  59.                         <tr>
  60.                             <td class="label"><label for="username">Username:</label></td>
  61.                             <td class="field"><input type="text" id="username" name="username" class="title" /></td>
  62.                             <td><span id="usercapsnotice" class="notice">Caps On.</span></td>
  63.                         </tr>
  64.                         <tr>
  65.                             <td class="label"><label for="password">Password:</label></td>
  66.                             <td class="field"><input type="password" id="password" name="password" class="title" /></td>
  67.                             <td><span id="passcapsnotice" class="notice">Caps On.</span></td>
  68.                         </tr>
  69.                     </tbody>
  70.                 </table>
  71.             </fieldset>
  72.         </form>
  73.     </body>
  74.     </html>

其中：

  1. (function() {
  2.  
  3.     Browser.CapsLock = null;
  4.     var capsOn = null,
  5.         target = (Browser.Engine.trident) ? document : window;
  6.  
  7.     /**
  8.      * Figure out if caps lock is on by checking for a lower case letter with shift
  9.      * pressed or an uppercase letter without shift. Once we know if it is on/off,
  10.      * remove the event listener.
  11.      */
  12.     function checkCapsKey(event) {
  13.         if (event.code > 64 && event.code < 91) { // Capital Letters
  14.             Browser.CapsLock = capsOn = (event.shift) ? null : true;
  15.         } else if (event.code > 96 && event.code < 123) { // Lower-case Letters
  16.             Browser.CapsLock = capsOn = (event.shift) ? true : false;
  17.         }
  18.  
  19.         if (capsOn !== null) {
  20.             target.removeEvent('keypress', checkCapsKey);
  21.         }
  22.     }
  23.  
  24.     /**
  25.      * If user moves away from the window, we can't tell what happened with the caps
  26.      * key when he returns so we reset the caps checker.
  27.      */
  28.     window.addEvent('blur', function(event) {
  29.         Browser.CapsLock = capsOn = null;
  30.         target.addEvent('keypress', checkCapsKey);
  31.     });
  32.  
  33.     /**
  34.      * Checks an event for caps lock key presses. If it's Safari 3+, keyup means caps lock
  35.      * is off and keydown means caps lock is on. Otherwise just toggle the value of capsOn.
  36.      */
  37.     function checkCapsPress(event) {
  38.         if (event.code == 20 && capsOn !== null) {
  39.             if (Browser.Engine.webkit && Browser.Engine.version > 420) {
  40.                 Browser.CapsLock = capsOn = (event.event.type == 'keydown');
  41.             } else {
  42.                 if (event.event.type == 'keydown') {
  43.                     Browser.CapsLock = capsOn = !capsOn;
  44.                 }
  45.             }
  46.         }
  47.     }
  48.  
  49.     /**
  50.      * Add events to the target to monitor for caps lock key presses and to do
  51.      * the initial caps lock key sniffing.
  52.      */
  53.     target.addEvents({
  54.         'keyup': checkCapsPress,
  55.         'keydown': checkCapsPress,
  56.         'keypress': checkCapsKey
  57.     });
  58.  
  59.     Event.implement({ hasCapsLock: function(event) { return capsOn; } });
  60.  
  61.     Element.Events.capsLockOn = {
  62.         base: 'keydown',
  63.         condition: function(event) {
  64.             if (event.code == 20) {
  65.                 if (Browser.Engine.webkit && Browser.Engine.version > 420) {
  66.                     return true;
  67.                 } else if (capsOn !== null) {
  68.                     return !capsOn;
  69.                 }
  70.             } else if (capsOn !== null) {
  71.                 return event.hasCapsLock();
  72.             }
  73.         }
  74.     };
  75.  
  76.     Element.Events.capsLockOff = {
  77.         base: (Browser.Engine.webkit) ? 'keyup' : 'keydown',
  78.         condition: function(event) {
  79.             if (event.code == 20) {
  80.                 if (Browser.Engine.webkit && Browser.Engine.version > 420) {
  81.                     return true;
  82.                 } else if (capsOn !== null) {
  83.                     return (capsOn === true);
  84.                 }
  85.             } else if (capsOn !== null) {
  86.                 return !event.hasCapsLock();
  87.             }
  88.         }
  89.     };
  90.  
  91.     })();

js大小写锁判断的更多相关文章

  1. JS 中如何判断 undefined 和 null

    JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...

  2. js 正则之 判断密码类型

    原文:js 正则之 判断密码类型 今天没啥写的,就分享个思路吧.之前在群里讨论的时候,谢亮兄弟说判断密码是否是纯数字,纯字母之类的.如果用 , 条判断,那就老长一大段了.这个思路是我之前看 jQuer ...

  3. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  4. JS前端开发判断是否是手机端并跳转操作（小结）

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  5. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  6. JS中如何判断对象是对象还是数组

    JS中如何判断对象是对象还是数组 一.总结 一句话总结:typeof Array.isArray === "function",Array.isArray(value)和Objec ...

  7. js之checkbox判断常用示例

    checkbox常用示例可参考: 关于checkbox自动选中 checkbox选中并通过ajax传数组到后台接收 MP实战系列(十三)之批量修改操作(前后台异步交互) 本次说的是,还是关于智能门锁开 ...

  8. 160304-02、JS 中如何判断null 和undefined

    JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的用法: var exp = undef ...

  9. js正则表达式，判断字符串是否以数字组结尾，并取出结尾的数字

    js正则表达式,判断字符串是否以数字组结尾,并取出结尾的数字 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

随机推荐

  1. Spring MVC详细示例实战教程【转】

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  2. android 监听 USB 拔插广播消息

    USBBroadcastReceiver.java package com.example.communication; import android.content.BroadcastReceive ...

  3. 【转】在Spring中基于JDBC进行数据访问时怎么控制超时

    http://www.myexception.cn/database/1651797.html 在Spring中基于JDBC进行数据访问时如何控制超时 超时分类 超时根据作用域可做如下层级划分: Tr ...

  4. 使用Docker官方的Django包【转】

    官方Django docker,并没有安装Django 所以需要 在requirements.txt中配置Django 具体安装流程可以参考:http://www.logme.cn/blog/51/u ...

  5. day5_python学习笔记_chapter7_字典

    1. 内建方法fromkeys()创建一个默认字典, 字典中元素具有相同的值,默认为None dict1 = {}.fromkeys(('x', 'y'), -1) 2. 访问字典中的值,  for ...

  6. Fiddler [Fiddler] Connection to localhost. failed.

    原文地址:http://blog.chinaunix.net/uid-20675015-id-1899931.html 在用Fiddler调试本机的网站时,即访问http://localhost,返回 ...

  7. 找出n个数中出现了奇数次的两个数

    如果是找只出现了奇数次的一个数, 那么我们从头异或一遍就可以. 那么如何找出现了奇数次的两个数呢? 首先我们还是从头异或一遍, 然后结果肯定不为0, 对于异或出来的结果, 如果这个数的某一位是1, 说 ...

  8. Linux中的盘符问题

    在windows 中像 C.D.E.F这些都可以当盘符,就是说对应了我们所看到的C盘,D盘,E盘,F盘.然而是不是只能加26个硬盘了呢? 盘符到硬盘也只是一个对映关系,我们也是可以建立从一个文件夹到一 ...

  9. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)

    四.伪DOM自定义事件 这里的“伪DOM自定义事件”是自己定义的一个名词,用来区分DOM自定义事件的.例如jQuery库,其是基于包装器(一个包含DOM元素的中间层)扩展事件的,既与DOM相关,又不直 ...

  10. 使用java API查询java类

    一.java API的下载地址 前面列举了常用的java类,但只是介绍了功能,具体详细的用法(比如要知道该类的属性和方法)要需要调用java的API(Application Program Inter ...