82
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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の同時押しを判定する](not good but great - http://go.shr.lc/1lZiY3a)
...けっこうめんどくさそうでした。
(てかキーコードいちいち調べるのも面倒)

####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]

82
81
2

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
82
81

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?