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

更新日: 公開日:2014/01/31
jQueryキーボード入力の制御

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

  1. キー入力イベントをキャッチする
  2. 処理を実行させずキャンセルする

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

キー入力イベントは .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 でキーボード入力をキャンセル(無効化)する方法でした。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。