JavascriptでCaps-LockがOnになっているのを確認する方法

2020年7月19日

Javascript テクノロジー プログラミング

とあるwebサービスのログインをする時に、caps-lockがONになっていて、ログインができなくて困っていた、ユゲタです。 パソコンを使っているとよくあることですが、ブラインドタッチをする人などは、caps-lockの位置が手のひらで覆いかぶされていて、不意にonにしてしまったCaps-Lockに気が付かない場合が多々あります。 もちろん、文字を入力をした時に、大文字になっている状態が打ち込んだ文字で確認できると、それに気がつくことができるんですが、システム側でどういう対応ができるのかを考えてみました。 caps-lockって、わからないって人の為に、簡単に説明しておくと、windowの場合は、キーボードの一番左の中断ぐらいに「Caps Lock」というキーがあり、Shiftキーと同時に押すと、大文字入力モードになります。 macの場合は、キーボードの一番左したのボタンで、onになっていると、ランプがつきます。

本日のIT謎掛け

「Caps Lock」と、かけまして・・・ 「スーパーマリオのスター」と、ときます。 そのココロは・・・ 大きい状態にして、進みます。

JavascriptでCaps Lockの判定は簡単

入力項目の箇所で、以下のようにすることで、CapsLockの状態で有ることは非常に簡単に取得することができます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CapsLockCheck</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>CapsLockチェック</h1> <input type="text" name="text"> <script> var input_element = document.querySelector("input[name='text']"); if(input_element){ input_element.addEventListener("keyup" , capsLockCheck); } function capsLockCheck(e){ // CapsLockチェック if(e.getModifierState("CapsLock") === true){ console.log("CapsLock"); } } </script> </body> </html> ブラウザのデバッグコンソールを開いておくと、Caps-Lockモードで入力すると、文字列が表示されるのが確認できます。

他にも確認できる事

CapsLock以外にも以下のような感じで、いろいろな入力状態を確認することができます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CapsLockCheck</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>CapsLockチェック</h1> <input type="text" name="text"> <script> var input_element = document.querySelector("input[name='text']"); if(input_element){ input_element.addEventListener("keyup" , capsLockCheck); } function capsLockCheck(e){ // CapsLockチェック if(e.getModifierState("CapsLock") === true){ console.log("CapsLock"); } // 日本語入力モード if(e.isComposing === true){ console.log("全角モード"); } // ALT if(e.altKey){ console.log("Alt or option"); } // Control if(e.ctrlKey){ console.log("Control"); } // Command if(e.metaKey){ console.log("Command"); } // Numlock if(e.getModifierState("Numlock") === true){ console.log("Numlock"); } // ScrollLock if(e.getModifierState("ScrollLock") === true){ console.log("Scroll-Lock"); } // Shift if(e.shiftKey){ console.log("Shift"); } // Windows-key if(e.getModifierState("OS") === true){ console.log("Windows-key"); } } </script> </body> </html> どの装飾キーを一緒に押していたかが判断できるので、想定外の入力を判断することが可能になります。 これまでのEFOは、入力された文字列だけで判断されていましたが、こうしたキーボード(入力装置)に対する判定も入れることで、操作する人の効率があがり、ストレスも軽減されるでしょう。 ※Commandは、OSの機能が優先されるので、想定どおりに動かないようです。keydownイベントで取得した方が良さそうですね。

サイト構築時に考えたいこと

windowsの場合は、shiftと同時押しでロックされるので、あまり頻繁にCapsLockがオンになってしまうことはないですが、macの場合は、小指が少し当たってしまうと、知らない間にCapsLockがオンになっていて、手のひらで隠されて気が付かずに、入力してしまうということは、まあまあよくある事です。 OSのログイン画面で、CapsLockが音になっていると、メッセージがでて入力モードを確認してくれますが、あれはまあまあ助かる機能だということはわかりますが、個人情報を入力するようなWEBサービスで、こうしたモードチェックが入っているのは見たことがありません。 正直、プログラミングをするコードエディタでも、これを考慮されたUIをお願いしたいのもありますが、とりあえずは、一般的なWEBサイト系での実現を目指してみたいと思います。 なんとなく、EFO2.0の領域が見えてきましたね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。