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
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!