jQuery でキーボード入力をキャンセル（無効化）する方法

Web システムや Web サイト上で、キーボードからの入力を制御する方法は次の通りです。

たったこれだけで、キーボードの入力を無効化することができます。

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

キーボードからの入力は、それぞれのキーに応じたコードが割り当てられています。

まずは具体的にどのようなコード値が得られるのか、確認してみましょう。keydown のイベントを利用すれば、入力のタイミングでコードを取得することができます。

キーコード取得サンプル

$(function(){
  $("#hogehoge").keydown(function(event){
    // 入力されたキーのコード
    var keyCode = event.keyCode;
    // キーコードを出力
    $("#hogehogeKeyCode").val("keyCode: " + keyCode); 
  });
});

キーボードからの入力された情報は、数字のコード値に変換されることが分かります。この内容は Windows や Linux 等の OS に問わず、共通の値が得られます。

キー入力イベントを無効化する方法

前述のサンプルでは、左側のテキストボックスに押下したキーの内容が表示されました。これは keydown のイベントが有効になったまま処理が終わっているためです。

ここでテキストボックスへ出力を行わないようにするには、キー入力のイベントをキャンセルします。具体的には keydown のイベントを false で終了させるだけです。

一般的に JavaScript のイベント処理では、false を返却することでイベントを取り消すことができるのです。では、先程のサンプルに false を返却する処理を加えてみましょう。

キー入力イベントをキャンセルする

$(function(){
  $("#hogehoge").keydown(function(event){
    var keyCode = event.keyCode;
    $("#hogehogeKeyCode").val("keyCode: " + keyCode);

    // falseを返却してキー入力処理をキャンセル
    return false;

  });
});

最初のサンプルとは異なり、左側のテキストボックスに文字が出力されません。このように false を返すことで、イベントを無効にできるのです。

画面全体のキー入力を無効化する

上記の例では、特定の input 項目に対して制御を行いました。この処理に変更を加えて、イベント発生源をウィンドウそのものにすれば、画面全体に対してキーイベントを無効化することも可能です。

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

$(function(){
  $(window).keydown(function(event){ 
    // falseを返却してキー入力処理をキャンセル
    return false;
  });
});

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

あとはこの処理を応用すれば、特定のファンクションキーや Ctrl と組み合わせたキーイベントを無効化できるようにもなります。社内 Web システムのような特定の環境においては効果のある制御になるので、応用編として参考にしてください。

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

まず JavaScript の処理としてキー入力イベントは keydown から取得します。入力したキーによって、コード値を取得することができます。そして処理を無効化...

以上、jQuery でキーボード入力をキャンセル（無効化）する方法でした。