<html> <head> <title>CapsLock Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script> <script src="./CapsLock.js?ver=1.0" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.addEvent('domready', function() { var pass = document.id('passcapsnotice'), user = document.id('usercapsnotice'); function passCapsOn() { pass.setStyle('display', 'block'); } function passCapsOff() { pass.setStyle('display', 'none'); } function userCapsOn() { user.setStyle('display', 'block'); } function userCapsOff() { user.setStyle('display', 'none'); } document.id('username').addEvents({ 'capsLockOn': userCapsOn, 'capsLockOff': userCapsOff, 'blur': userCapsOff, 'focus': function(event) { if (event.hasCapsLock()) { userCapsOn(); } } }); document.id('password').addEvents({ 'capsLockOn': passCapsOn, 'capsLockOff': passCapsOff, 'blur': passCapsOff, 'focus': function(event) { if (event.hasCapsLock()) { passCapsOn(); } } }); }); </script> <style type="text/css"> form { width: 500px; margin: 0 auto; } .label { width: 60px; } .field { width: 260px; } .notice { display: none; line-height: 2em; margin-top: .5em; padding: 0; } </style> </head> <body> <form> <fieldset> <legend>Login</legend> <table> <tbody> <tr> <td class="label"><label for="username">Username:</label></td> <td class="field"><input type="text" id="username" name="username" class="title" /></td> <td><span id="usercapsnotice" class="notice">Caps On.</span></td> </tr> <tr> <td class="label"><label for="password">Password:</label></td> <td class="field"><input type="password" id="password" name="password" class="title" /></td> <td><span id="passcapsnotice" class="notice">Caps On.</span></td> </tr> </tbody> </table> </fieldset> </form> </body> </html>
其中：
(function() { Browser.CapsLock = null; var capsOn = null, target = (Browser.Engine.trident) ? document : window; /** * Figure out if caps lock is on by checking for a lower case letter with shift * pressed or an uppercase letter without shift. Once we know if it is on/off, * remove the event listener. */ function checkCapsKey(event) { if (event.code > 64 && event.code < 91) { // Capital Letters Browser.CapsLock = capsOn = (event.shift) ? null : true; } else if (event.code > 96 && event.code < 123) { // Lower-case Letters Browser.CapsLock = capsOn = (event.shift) ? true : false; } if (capsOn !== null) { target.removeEvent('keypress', checkCapsKey); } } /** * If user moves away from the window, we can't tell what happened with the caps * key when he returns so we reset the caps checker. */ window.addEvent('blur', function(event) { Browser.CapsLock = capsOn = null; target.addEvent('keypress', checkCapsKey); }); /** * Checks an event for caps lock key presses. If it's Safari 3+, keyup means caps lock * is off and keydown means caps lock is on. Otherwise just toggle the value of capsOn. */ function checkCapsPress(event) { if (event.code == 20 && capsOn !== null) { if (Browser.Engine.webkit && Browser.Engine.version > 420) { Browser.CapsLock = capsOn = (event.event.type == 'keydown'); } else { if (event.event.type == 'keydown') { Browser.CapsLock = capsOn = !capsOn; } } } } /** * Add events to the target to monitor for caps lock key presses and to do * the initial caps lock key sniffing. */ target.addEvents({ 'keyup': checkCapsPress, 'keydown': checkCapsPress, 'keypress': checkCapsKey }); Event.implement({ hasCapsLock: function(event) { return capsOn; } }); Element.Events.capsLockOn = { base: 'keydown', condition: function(event) { if (event.code == 20) { if (Browser.Engine.webkit && Browser.Engine.version > 420) { return true; } else if (capsOn !== null) { return !capsOn; } } else if (capsOn !== null) { return event.hasCapsLock(); } } }; Element.Events.capsLockOff = { base: (Browser.Engine.webkit) ? 'keyup' : 'keydown', condition: function(event) { if (event.code == 20) { if (Browser.Engine.webkit && Browser.Engine.version > 420) { return true; } else if (capsOn !== null) { return (capsOn === true); } } else if (capsOn !== null) { return !event.hasCapsLock(); } } }; })();