とある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の領域が見えてきましたね。
0 件のコメント:
コメントを投稿