jQuery でファンクションキーやバックスペースキーを無効化する制御

2016/01/13

前回、キーボード入力をキャンセルする方法について紹介しましたが、その応用として具体的なキー制御を行っていきましょう。

参考)「jQuery でキーボード入力をキャンセルする方法

目次

ファンクションキーを制御する

各ファンクションのキーコードは 112 の F1 から 123 の F12 まで連続して割り当てられています。全てのファンクションキーを制御するならば、112 ~ 123 のコードを全て対象とすれば良いですが、F7F9 は半角カナ変換や日本語入力からのアルファベット変換で利用する場合がありますので、一概に全てのキーに制限を掛けてしまうのは使い勝手が悪くなります。

制限を掛ける必要がなければ、キー制御対象から外せば問題ありません。以下のサンプルでは、F1F12 の全てのキーを制御する場合を例に挙げています。

Ctrl + N を制御する

Web システムの場合、Ctrl + N により別 window を表示させる処理を解放してしまうと、それぞれの画面で同じセッション値を利用して登録や更新処理を行ってしまうので(制御処理を入れていれば別ですが)、出来る限り新しい Window を表示させる処理も制御してしまいたいものです。

当然 Ctrl キーも制御することが可能です。Ctrl キーに限らず、Alt キー、Shift キーについては、他のキーと共に一緒に押されているかを判断することが可能です。(これらは event オブジェクトから取得できます。)

問題があるのは IE

これは Internet Explorer の場合に問題になる事象で、同じアドレスで新しい Window を開くために起こってしまいます。Chrome では特に問題はありません。また、以下のキー制御は Chrome では制御しきれないので、その点はご了承ください。

バックスペースキーを制御する

バックスペースキー制御は、前のページに戻ってしまうのを防ぎたい場合に制御します。特に前の画面遷移をしても問題無いようであれば不要ですが、うっかり戻ってしまって都合が悪い場合は制御しておくべきでしょう。

バックスペースのキー制御は注意が必要

バックスペースキーの場合、これまでと同様にキーコードのみで制御してしまうと、入力文字を削除するためにバックスペースキーが利用できなくなってしまいます。つまり、テキストボックスとテキストエリアに対しては、制御を解放する必要があります。

そして更に付け加えると、テキストボックス、テキストエリアで制御を解放しても、disabled 属性や readonly 属性が付与されている場合は、前の画面に戻ってしまいます。

つまりまとめると、テキストボックス、テキストエリアにおいて入力可能な場合に限りバックスペースキーの入力を許容し、それ以外は全て制御してしまいましょう。

また、前の画面へ戻ってしまうことを制御するには、バックスペースキー以外にも Alt + キーの制御が必要になります。以下のサンプルには、そちらも含めて例示します。

まとめ

上記に挙げたサンプルは、一部だけ利用するようなことはあまり無いと思います。最後に、全てをまとめたサンプルコードを用意しました。

もう少しスマートにコーディングしたいところですが、今回のサンプルは分かり易さを考慮しています。このままでも利用できますが、あとはこちらをベースに変更していただければと思います。

PAGE TOP ↑