JavascriptでNumLock、CapsLock、ScrollLockキーのON／OFFを取得する方法

システム開発をしているとログイン画面でパスワードを正しく入力しているのにログインできないという問合せがよく来ます。
その中でも割と多いのが「大文字、小文字の違い、NumLockキーがOFFになっていて数字が正しく入力できていない」というものです。

今回はJavascriptでNumLockキー、CapsLockキー、ScrollLockキーのON／OFFを取得し、現在の状況をユーザーに画面上で分かるようにして、このような間違いを防ぎたいと思います。

NumLockキー、CapsLockキー、ScrollLockキーのON／OFFを取得する

JavascriptでNumLockキー、CapsLockキー、ScrollLockキーのON／OFFを取得するにはキーを押されたタイミングでgetModifierStateメソッドを利用して取得できます。

<script>
            window.onload = function () {
                document.dispatchEvent( new KeyboardEvent( "keyup",{key: "a" })) ;
            };
            window.document.onkeyup = function( event ){
                var elem = document.getElementById( "message_area" ) ;
                elem.value = "" ;
                if( event.getModifierState( "NumLock" ) === false ) {
                    console.log( "NumLock OFF" ) ;
                    elem.value += "NumLockがOFFになっています。" ;
                }
                else {
                    console.log( "NumLock ON" ) ;
                }
                if( event.getModifierState( "CapsLock" ) === false ) {
                    console.log( "CapsLock OFF" ) ;
                }
                else {
                    console.log( "CapsLock ON" ) ;
                    elem.value += "CapsLockがONになっています。" ;
                }
                if( event.getModifierState( "ScrollLock" ) === false ) {
                    console.log( "ScrollLock OFF" ) ;
                }
                else {
                    console.log( "ScrollLock ON" ) ;
                    elem.value += "ScrollLockがONになっています。" ;
                }
            }
        </script>

キー入力を拾うイベントは「KeyDown」イベントを利用します。

その中でeventで渡されたオブジェクト内の「getModifierState」を呼び出せば判断できます。

これでNumLockのON/OFF、CapsLockのON/OFF、ScrollLockのON/OFFの状態をユーザーに視覚的に教えることができます。

まとめ

意外と簡単にJavascriptでNumLockキー、CapsLockキーのON／OFF、ScrollLockのON/OFFの状態は取得できますね。

なお、動作はInternet Explore11とGoogle Chromeで動作確認しました。

以上、「JavascriptでNumLock、CapsLock、ScrollLockキーのON／OFFを取得する方法」でした。