もう迷わない！JavaScriptでキーボードイベントを処理するベストプラクティス：keyCode、which、key、code徹底比較
2024-05-23
JavaScriptとjQueryにおける.keyCodeと.whichの違い
定義
keyCode: 押されたキーのASCIIコードを表します。古いブラウザでは標準でしたが、現在では非推奨となっています。which: ブラウザやOSによって異なる、キーの固有コードを表します。現在では主流なプロパティです。
互換性
keyCode: 古いブラウザでは問題なく動作しますが、新しいブラウザでは動作しない場合があります。
使い分け
- 互換性が重要でない場合は、
whichを使うのがおすすめです。 - 古いブラウザもサポートする必要がある場合は、
keyCodeとwhichの両方をチェックする必要があります。
jQueryでは、whichプロパティをラップしたevent.whichプロパティを提供しています。そのため、jQueryを使用する場合は、event.whichを使うのが一般的です。
例
$(document).keydown(function(event) {
if (event.which === 13) {
// Enterキーが押されたら処理を実行
}
});
まとめ
keyCodeとwhichは、どちらもキーボードイベントのキーコードを取得するために使用できます。whichの方が汎用性が高く、互換性も優れているため、一般的にはwhichを使うのがおすすめです。- jQueryを使用する場合は、
event.whichプロパティを使うのが一般的です。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Keycode Demo</title>
</head>
<body>
<input type="text" id="textInput">
<script src="script.js"></script>
</body>
</html>
JavaScript
const textInput = document.getElementById('textInput');
textInput.addEventListener('keydown', function(event) {
const keyCode = event.keyCode;
const which = event.which;
console.log(`keyCode: ${keyCode}, which: ${which}`);
});
このコードを実行すると、textInputに入力されたキーのkeyCodeとwhichがコンソールに出力されます。
説明
event.keyCode：押されたキーのASCIIコードを取得します。event.which：ブラウザやOSによって異なる、キーの固有コードを取得します。
補足
- このコードは、古いブラウザでは動作しない場合があります。
- jQueryを使用する場合は、以下のコードのように書き換えることができます。
$(document).keydown(function(event) {
const keyCode = event.keyCode;
const which = event.which;
console.log(`keyCode: ${keyCode}, which: ${which}`);
});
このサンプルコードを参考に、keyCodeとwhichを上手に使い分けて、JavaScriptアプリケーションを開発してください。
JavaScript でキーボードイベントを処理するその他の方法
event.key プロパティは、押されたキーの物理的なキー名を表します。 例えば、"Enter" キーが押された場合は "Enter" 、"a" キーが押された場合は "a" が取得できます。
このプロパティは、比較的新しいブラウザでのみサポートされていますが、可読性が高く、分かりやすいコードを書くことができます。
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
// Enterキーが押されたら処理を実行
}
});
このプロパティも、比較的新しいブラウザでのみサポートされています。
document.addEventListener('keydown', function(event) {
if (event.code === 'Enter') {
// Enterキーが押されたら処理を実行
}
});
キーボードイベントライブラリを使う
例：Mousetrap を使ったコード
Mousetrap.bind('ctrl+s', function() {
// Ctrl+Sキーが押されたら処理を実行
});
これらの方法を組み合わせて、状況に応じて適切な方法を選択することで、より柔軟で効率的なキーボードイベント処理を実現することができます。
javascript jquery
