チャットなどを作るときに、"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キーなど特殊キーが押されたかを調べる
##完成コード
$(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)が実行されちゃうのでチャットなどの送信に使う場合は書いておきましょう。
##まとめ
他にも.altKey
やmetaKey
などもあるのでこれらを使えば同時押し制御もしやすくなるんじゃないかな。
KeyboardEvent - DOM | MDN
###キーコード表
各ブラウザのキーコード表[JavaScript]