Web アプリを作成していると、どうしてもユーザ操作の再表示( F5 )や、戻る( Backspace ) の操作を行って欲しくない場合があります。そのような時のために jQuery によって簡単に F5 や Backspace のキーダウンイベントを無効させることができますので、サンプルを掲載します。
スポンサーリンク
ただし、ユーザーの誤操作などによる操作性や利便性を上げるためにするためのイベントの無効化は良いとは思いますが、イベントを無効化しなければ正常に動作しないという、ネガティブな理由では「却下」されることもあるとは思います。多くはネガティブな理由であるかもしれませんが。。。
再表示( F5 )や戻る( Backspace ) の無効化
$(function () { $(document).keydown(function(event){ // クリックされたキーコードを取得する var keyCode = event.keyCode; // F5 の場合は falseをリターン if(keyCode == 116) { console.log("F5"); return false; } // バックスペースキーを制御する if(keyCode == 8){ console.log("Backspace"); return false; } });
さらに、管理人は知らなかったのですが、「 Alt + ← 」 や 「 Alt + → 」 のキー操作でページを進めたり、戻るせたりすることができます。
// Alt キーが押されているかを取得する var altKey = event.altKey; if(altKey) { if(keyCode == 37 || keyCode == 39){ console.log("[Alt + →] または [Alt + ←]"); return false; } }
Backspace のキーイベントを無効にするとテキストなどの入力エリア内でのバックスペースも無効化されてしまいます。 このような場合には、キーが押されたオブジェクトによって無効化するか否かを判断する必要があります。
// キーイベントが発生した対象のオブジェクト var targetObj = event.target; /* * 対象オブジェクトの属性で無効化するかを判断する項目例 * ---------------------------------------------------------------- * targetObj.tagName == "input" タグ名で判断する(その他 textareaなど) * targetObj.type == "text" タイプで判断する(その他 passwordなど) * targetObj.readOnly == fasle 読み取り専用かどうか * targetObj.disabled == fasle 有効かどうか */