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

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

More than 3 years have 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プロパティがサポートされています。
どんどん使っていきましょう!

ledsun
編集リクエスト、コメント大歓迎です。
luxiar
Ruby on Rails専門のWebアプリケーション開発に特化した町田の受託開発企業です
http://www.luxiar.com/index.html
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