jQueryでキーボードの入力と合わせて入力されたキーを取得するあれこれ

jQueryをつかって、キーボードでの操作で判定を行ったりするときに必要になる、キーの取得やkeydownイベントの組み合わせのあれこれとなります。

keydown、keyup、keypressイベントを使う

キーボード関連のイベントのとなる、keydown keyup keypress の初歩的な使い方です。

$(selector).on("keydown",function(e){
 
});

jQuery 3.0 からはイベントはonに集約されているので、このような書き方で統一してます。keydownのところをkeyupやkeypressに置き換えればそれぞれ動作します。selectorのところは対象となるところを入れてください、画面全体にするばあいは window とします。

重要なのが function(e) となっているところです、こうしないと何のキーが押されたのかを知ることが出来ません。上のコードではとりあえずキーが押されると実行されます、そこでeを使って何が押されたのかを知ることで、押されたキーによる動作を指定できるようになります。

$(selector).on("keydown",function(e){
 console.log(e.keyCode);
});

e.keyCode で押されたキーを取得することが出来ます、上のコードではコンソールログに押されたキーを出力しています、キーは数値で出力されます。

まずは、こちらのコードを作って動作させたいキーのコードを知ることが出来ます。

$(selector).on("keydown",function(e){
 if(e.keyCode == 37) {
  console.log("右キーが押されました");
 }
});

ifを使って今入力されたキーと予め動作を指定したいキーが一致した場合に何かを実行する形になります、このコードでは十字キーの右キーが押された場合にコンソールログに「右キーがおされました」と出るようになっています。

$(selector).on("keydown",function(e){
 if(e.ctrlKey){
  if(e.keyCode == 37) {
   console.log("ctrlと右キーが同時に押されました");
  }
 }
});

次は複数のキーを組み合わせるときの方法です、ctrlキーにも番号が存在しますが e.ctrlKey で判定することが出来ます、ctrl+右キーで何か動作させたい場合は、まず ctrlが押されているかどうかで条件分岐してさらに指定のキーが押されているときに実行するようにすれば良いです。

上のコードでは、ctrl+右キーを押すとコンソールログに「ctrlと右キーが同時に押されました」と出るようになっています。

基本的な使い方は今夏感じで、例えば十字キーを使ってタブ表示の切り替えや、前後ページへの移動などを行えるようにすることが出来ます。他にはチャットなどで送信するときに Ctrl+Enter といった指定も出来てキーボードで次々に操作する方法なども作れますね。

短縮URL: