LoginSignup
81

More than 5 years have passed since last update.

jQueryを使ってキーの同時押し取得(shiftやctrl)

Last updated at Posted at 2014-04-28

チャットなどを作るときに、"Shift+Enterキーを押したときに送信を行う"などをよく使うと思います。このときのキーの同時押しの処理がイマイチ情報を調べにくかったのでまとめておきます。

やりたいこと

Shift + Enterを押した時に何か

調査

1つのキーコード取得

jQueryのkeydownメソッドを使うと凄く簡単に1つのキーなら取得できました。
keydown(fn) - jQuery 日本語リファレンス

複数のキーコード取得

基本的には1つのキーコードを取得してそれが押された状態で次のキーが押されたという判定をkeyup,keydownを使って取得するみたいです。
JavascriptでKeyの同時押しを判定する
...けっこうめんどくさそうでした。
(てかキーコードいちいち調べるのも面倒)

altKeyとかmetaKeyとかのイベントがあるっぽい

教えてもらったのですが、altキーcontrolキーなどのキーに関しては専用のイベントがあるみたいです。jQueryは使ってないけどドンピシャなサンプルがこちら。ピュアなJSならこっちのサンプルの方がいいかも
CTRLキーなど特殊キーが押されたかを調べる

完成コード

get_multipule_key_event.js

$(function($){
  //Ctrlキー+エンター
  $(window).keydown(function(e){
    if(event.ctrlKey){
      if(e.keyCode === 13){
        alert("ctrl+enter");
         return false;
      }
    }
  });
  //Shiftキー+エンター ←今回のやりたかったこと
  $(window).keydown(function(e){
    if(event.shiftKey){
      if(e.keyCode === 13){
        alert("shift+enter");
         return false;
      }
    }
  });
});

return false;を入れないとキーコード押したあとに改行(Enter)が実行されちゃうのでチャットなどの送信に使う場合は書いておきましょう。

まとめ

他にも.altKeymetaKeyなどもあるのでこれらを使えば同時押し制御もしやすくなるんじゃないかな。
KeyboardEvent - DOM | MDN

キーコード表

各ブラウザのキーコード表[JavaScript]

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
81