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

2017/02/15

Webシステムを構築する際に、処理制限としてキーボードからの入力キーを制御したい場合があります。jQuery ではキー入力のイベントを制御することで、簡単にキーボードからの入力をキャンセルすることができます。

キー入力イベントは .keydown() で処理する

それぞれのキーにはコードが割り当てられています。試しに、テキストボックスに入力したキーコードを表示してみましょう。keydownイベントを利用することで、キー入力時のタイミングで処理を走らせることができます。

キーコード取得サンプル


↑こちらのテキストボックス内でキー入力してみてください。(半角英数モードで)

キー入力イベントをキャンセルするには false を返す

keydown イベントにおいて、特に何も記載をしなければ、そのキー入力処理が実行されます。先ほどのサンプルでは、入力した文字はテキストボックスに表示されます。

ここで、テキストボックスへの入力を行わないようにするには、keydown イベントの中でfalse値を返却します。keydown イベントに限らず、イベントを取り消すには、false を返却することでキャンセルさせることができます。

では先程のサンプルで、キーコードを取得した後にキャンセル処理を噛ませて、左側のテキストボックスには入力されないようにしてみましょう。

キーイベントのキャンセル


↑こちらのテキストボックス内でキー入力してみてください。(半角英数モードで)

画面全体でキー入力を制限する

前述のサンプルは、特定の input 項目における制御でしたが、画面全体に対して制限することも可能です。その場合は、イベント発生元を window そのものにしてしまえば、対応できます。

全画面でキー入力を制限するサンプル

※ こちらは前述のサンプルが動作しなくなってしまうので、サンプルコードのみとなります。

あとは、これらの処理を応用することで、ある特定キーのみを制御することが可能になります。そちらについては、次回応用編としてご紹介します。

PAGE TOP ↑