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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

とあるwebサービスのログインをする時に、caps-lockがONになっていて、ログインができなくて困っていた、下駄です。
 

パソコンを使っているとよくあることですが、ブラインドタッチをする人などは、caps-lockの位置が手のひらで覆いかぶされていて、不意にonにしてしまったCaps-Lockに気が付かない場合が多々あります。
 

もちろん、文字を入力をした時に、大文字になっている状態が打ち込んだ文字で確認できると、それに気がつくことができるんですが、システム側でどういう対応ができるのかを考えてみました。
 

caps-lockって、わからないって人の為に、簡単に説明しておくと、windowの場合は、キーボードの一番左の中断ぐらいに「Caps Lock」というキーがあり、Shiftキーと同時に押すと、大文字入力モードになります。
 

macの場合は、キーボードの一番左したのボタンで、onになっていると、ランプがつきます。

本日のIT謎掛け

「Caps Lock」と、かけまして、
 

「マリオがスター」と、ときます。
 

そのココロは・・・
 

大きい状態にして、進みます。

JavascriptでCaps Lockの判定は簡単

入力項目の箇所で、以下のようにすることで、CapsLockの状態で有ることは非常に簡単に取得することができます。
 

 

ブラウザのデバッグコンソールを開いておくと、Caps-Lockモードで入力すると、文字列が表示されるのが確認できます。
 

他にも確認できる事

CapsLock以外にも以下のような感じで、いろいろな入力状態を確認することができます。
 

 

どの装飾キーを一緒に押していたかが判断できるので、想定外の入力を判断することが可能になります。
 

これまでのEFOは、入力された文字列だけで判断されていましたが、こうしたキーボード(入力装置)に対する判定も入れることで、操作する人の効率があがり、ストレスも軽減されるでしょう。
 

※Commandは、OSの機能が優先されるので、想定どおりに動かないようです。keydownイベントで取得した方が良さそうですね。

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

windowsの場合は、shiftと同時押しでロックされるので、あまり頻繁にCapsLockがオンになってしまうことはないですが、macの場合は、小指が少し当たってしまうと、知らない間にCapsLockがオンになっていて、手のひらで隠されて気が付かずに、入力してしまうということは、まあまあよくある事です。
 

OSのログイン画面で、CapsLockが音になっていると、メッセージがでて入力モードを確認してくれますが、あれはまあまあ助かる機能だということはわかりますが、個人情報を入力するようなWEBサービスで、こうしたモードチェックが入っているのは見たことがありません。
 

正直、プログラミングをするコードエディタでも、これを考慮されたUIをお願いしたいのもありますが、とりあえずは、一般的なWEBサイト系での実現を目指してみたいと思います。
 

なんとなく、EFO2.0の領域が見えてきましたね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です