jQueryでキーボード操作を行う方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでキーボード操作を行う方法について、簡単に解説していきます。

キーコード

jQueryでキーボード操作を行うことができます。

本題に入る前に、まず、キーコードを理解しておきましょう。

←:37
↑:38
→:39
↓:40

例えば、←キー押下時は37のキーコードが取得されます。より詳しくは、キーコード一覧をご確認ください。

キー押下の検出

キー押下の検出はkeyupメソッドで行います。

html要素でも良いですが、ここではwindow要素に対して設定しています。

$(window).keyup(function(e){
  console.log(e.keyCode);
});

上記のように、キー押下の検出時は、ここではe.keyCodeで押されたキーが取得できます。

キー長押しの検出

キー長押しの検出も可能です。

その場合はkeyupメソッドではなく、keydownメソッドになります。

$(window).keydown(function(e){
  console.log(e.keyCode);
});

上記のコードのように、キー長押しの検出時も、ここでは通常のキー押下時と同様にe.keyCodeで押されたキーの取得が可能です。