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

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

これは、キーボードからの入力を制御するための基礎知識です。次のページで基本部分を詳しく説明しているので、参考にしてください。

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

Web システムや Web サイト上で、キーボードからの入力を制御する方法は次の通りです。 キー入力イベントをキャッチする 処理を実行させずキャンセルする...

目次

ファンクションキーを制御する

各ファンクションキーと割り当てられたキーコードの関係は次の通りです。

全てのファンクションキーを制御するならば 112 ～ 123 のコードに対して無効化にする処理を実装します。ただ F7 ～ F10 は、半角カナ変換や、日本語入力からのアルファベット変換に用いられるため、制御すると利便性が失われます。これらのキーは制限を掛ける必要性がないので、キー制御の対象から外してしまいましょう。

以下のサンプルでは、F1 ～ F6 F11 F12 キーの入力を制御するプログラムになっています。

$(function(){
  //------------------------
  // jQueryキー制御サンプル
  // return値falseによりキーキャンセル
  //------------------------
  $(document).keydown(function(event){
    // クリックされたキーのコード
    var keyCode = event.keyCode;

    // ファンクションキーを制御する
    // 制限を掛けたくない場合は対象から外す
    if(keyCode == 112 // F1キーの制御
    	|| keyCode == 113 // F2キーの制御
    	|| keyCode == 114 // F3キーの制御
    	|| keyCode == 115 // F4キーの制御
    	|| keyCode == 116 // F5キーの制御
    	|| keyCode == 117 // F6キーの制御
    	|| keyCode == 122 // F11キーの制御
    	|| keyCode == 123 // F12キーの制御
      )
    {
      return false;
    }
  });
});

Ctrl + N を制御する

Web システムを構築する場合、同一セッションで別ウィンドウが立ち上がることで登録・更新処理がややこしくなることがあります。そのため新規ウィンドウを立ち上げる Ctrl + N も制御の対象にしたほうが望ましいケースがあります。

ファンクションの場合は単一のキーでしたが、Ctrl キーとの組み合わせで制限することも可能です。また Alt や Shift についても同様です。

event オブジェクトから、これらのキーが押下されているか true・false で判断できるので、特定キーとの組み合わせで制御していきます。

同一セッションで同じウィンドウが表示されるのは IE のみ

ここで紹介する Ctrl + N の制御が必要になるのは Internet Explorer のみです。

Chrome や Edge 等の新しいブラウザは、Ctrl + N で空のウィンドウが表示されますが、IE に限り同じ URL で画面が展開されてしまいます。（いわゆる複写のような状態になります。）

なお、以下のプログラムは Chrome では正常に制御しきれないので、予めご了承ください。

$(function(){
  //------------------------
  // jQueryキー制御サンプル
  // return値falseによりキーキャンセル
  //------------------------
  $(document).keydown(function(event){
    // クリックされたキーのコード
    var keyCode = event.keyCode;
    // Ctrlキーがクリックされたか (true or false)
    var ctrlClick = event.ctrlKey;

    // Ctrl + Nを制御する
    if(ctrlClick && keyCode == 78){
      return false;
    }
  });
});

バックスペースキーを制御する

バックスペースキーは前のページに戻る機能を持っています。もし直前の画面へ遷移しても問題なければ制御は不要です。

バックスペースのキー制御は注意が必要

バックスペースキーの主な役割は、入力文字の削除に使われます。よって、これまでと同様にキーコードのみで制御すると、文字が消せない自体に陥ります。

そこで、テキストボックス・テキストエリアにおいては制御を外さなくてはいけません。更に、制御を外しても disabled 属性や readonly 属性が付与されていると、前の画面に戻ってしまいます。

つまり、これらの条件をまとめると、テキストボックス・テキストエリアは「入力可能な場合に限りバックスペースキーの入力を許容し、それ以外は全て制御」となります。

また、バックスペースキー以外にも Alt + ← で前画面へ戻ってしまうので、これらはセットで制御するようにしましょう。

以下のサンプルでは、全てを考慮したプログラムになっています。

$(function(){
  //------------------------
  // jQueryキー制御サンプル
  // return値falseによりキーキャンセル
  //------------------------
  $(document).keydown(function(event){
    // クリックされたキーのコード
    var keyCode = event.keyCode;
    // Ctrlキーがクリックされたか (true or false)
    var ctrlClick = event.ctrlKey;
    // Altキーがクリックされたか (true or false)
    var altClick = event.altKey;
    // キーイベントが発生した対象のオブジェクト
    var obj = event.target;

    // バックスペースキーを制御する
    if(keyCode == 8){
      // テキストボックス／テキストエリアを制御する
      if((obj.tagName == "INPUT" && obj.type == "TEXT")
      	  || obj.tagName == "TEXTAREA"){
        // 入力できる場合は制御しない
        if(!obj.readOnly && !obj.disabled){
          return true;
        }
      }
      return false;
    }

    // Alt + ←→を制御する
    if(altClick && (keyCode == 37 || keyCode == 39){
      return false;
    }
  });
});

まとめ

上記に挙げたサンプルは、一部だけ利用することはないため、最後に全てをまとめたサンプルコードを用意しておきます。

$(function(){
  //------------------------
  // jQueryキー制御サンプル
  // return値falseによりキーキャンセル
  //------------------------
  $(document).keydown(function(event){
    // クリックされたキーのコード
    var keyCode = event.keyCode;
    // Ctrlキーがクリックされたか (true or false)
    var ctrlClick = event.ctrlKey;
    // Altキーがクリックされたか (true or false)
    var altClick = event.altKey;
    // キーイベントが発生した対象のオブジェクト
    var obj = event.target;

    // ファンクションキーを制御する
    // 制限を掛けたくない場合は対象から外す
    if(keyCode == 112 // F1キーの制御
    	|| keyCode == 113 // F2キーの制御
    	|| keyCode == 114 // F3キーの制御
    	|| keyCode == 115 // F4キーの制御
    	|| keyCode == 116 // F5キーの制御
    	|| keyCode == 117 // F6キーの制御
    	|| keyCode == 122 // F11キーの制御
    	|| keyCode == 123 // F12キーの制御
      )
    {
      return false;
    }

    // バックスペースキーを制御する
    if(keyCode == 8){
      // テキストボックス／テキストエリアを制御する
      if((obj.tagName == "INPUT" && obj.type == "TEXT")
      	  || obj.tagName == "TEXTAREA"){
        // 入力できる場合は制御しない
        if(!obj.readOnly && !obj.disabled){
          return true;
        }
      }
      return false;
    }

    // Alt + ←を制御する
    if(altClick && (keyCode == 37 || keyCode == 39){
      return false;
    }

    // Ctrl + Nを制御する
    if(ctrlClick && keyCode == 78){
      return false;
    }
  });
});

少々冗長なコードになっていますが、ここでは可読性を考慮して記しているので、こちらをベースに改造していただければと思います。

以上、jQuery で各種キー入力を制御する方法でした。