Help us understand the problem. What is going on with this article?

DOM Keyboardイベントで押されたキーを判別するにはkeyプロパティを使う

More than 1 year has passed since last update.

エンターキー押下に反応するインタラクションを作りたいときなど、押されたキーを検出する話です。
入力文字列を検出する時はinputイベントを使います。

keyプロパティが推奨

keyプロパティがあります。

window.document.onkeydown = function(event){
    if (event.key === 'Enter') console.log('hello Enter')
}

詳しい仕様は以下を見てください。

主要なブラウザでサポート

KeyboardEvent.key - Web APIs | MDN
によるとと、2017/8/14日時点で

  • Chrome
  • Edge
  • Firefox (Gecko)
  • Internet Explorer
  • Opera
  • Safari (WebKit)

でサポートされています。

polyfill

IE8や古いAndroidのブラウザをサポートしたい場合、keyプロパティを提供するpolyfillライブラリが存在します。

後者の方がbowerパッケージがあるので多少使いやすいかもしれません。

keycodeは非推奨

KeyboardEvent.keyCode - Web API Interfaces | MDNによれば、keycodeプロパティは非推奨です。

Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

伝統的な次のソースコードは、これからは時代遅れになりつつあるようです。

window.document.onkeydown = function(event){
    if (event.keyCode === 13) console.log('hello Enter')
}

keyIdentifierは過去のプロパティ

ChromeとSafariにはkeyIdentifierというプロパティがありました。
使い方はkeyプロパティに似ています。

window.document.onkeydown = function(event){
    if (event.keyIdentifier === 'Enter') console.log('hello Enter')
}

残念ながら現在のWeb標準からは消えています。
詳しくは以下を見てください。

まとめ

主要なブラウザでkeyプロパティがサポートされています。
どんどん使っていきましょう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away