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

2014/01/31

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 でファンクションキーやバックスペースキーを無効化する制御
まず JavaScript の処理としてキー入力イベントは keydown から取得します。入力したキーによって、コード値を取得することができます。そして処理を無効化...

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします