【JavaScript】event.keyCodeでキーボード入力を取得する方法と代替手段

JavaScriptを使用してウェブページ上のユーザーのキーボード入力を処理する際に、event.keyCodeはかつてよく使用されていましたが、現在は非推奨となっています。この記事では、event.keyCodeの意味と代替手段について解説します。

event.keyCodeとは？

event.keyCodeは、JavaScriptでキーボードイベントを処理する際に使用されるプロパティです。このプロパティは、押されたキーのキーコードを示し、特定のキーが押されたときにアクションを実行するために使用されます。

event.keyCodeの問題点

event.keyCodeは、キーボードのレイアウトやIMEの違いによって予測できない振る舞いを示すことがあります。また、非推奨のプロパティであり、将来的にサポートされなくなる可能性があります。

代替手段: event.keyとevent.code

event.keyとevent.codeは、event.keyCodeの代替手段として推奨されています。これらのプロパティは、キーボードの実際の意味を示す文字列を返すため、キーボードレイアウトやIMEの影響を受けずにキーを正確に識別できます。

実装例

実際のコード例を交えながら、event.keyやevent.codeを使用して特定のキーが押された場合の処理を行う方法を紹介します。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    // Enterキーが押されたときの処理
    console.log('Enterキーが押されました');
  }
});

event.keyの値

アルファベットおよび数字

通常のアルファベットと数字は、それぞれそのままの文字列を返します。たとえば、”a”、”b”、”1″、”2″などです。

ファンクションキー

F1 から F12 まで: “F1” から “F12” までの文字列。

特殊キー

その他

• 複数のキーが押されている場合、最後に押されたキーの値が返されます。
• 大文字の場合は、大文字で返されます。
• 特殊なキーに関しては、キーボードによって返される文字列が異なる場合があります。

まとめ

event.keyCodeは非推奨のプロパティであり、代わりにevent.keyやevent.codeを使用することが推奨されています。これらのプロパティを使用することで、キーボードの入力をより効果的に処理し、互換性のあるウェブアプリケーションを作成することができます。