js大小写锁判断-CSDN博客

<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();
            }
        }
    };

    })();