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

2020年7月19日

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

t f B! P L
とある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の領域が見えてきましたね。

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ