【JavaScript】キーボード操作をトリガーにしたイベント

2018年3月15日2019年6月12日JavaScript,イベント

キーボードでの操作をトリガーにしたイベント実装のサンプルです

キーボード操作イベント一覧（JavaScript）

keydownとkeypressの違い

2つは似た挙動をしますが、「keypress」では「ALT」「CTRL」「SHIFT」など取得しないキーが存在します

キーボード操作イベントの動作サンプル

See the Pen JavaScript Key ivent by yochans (@yochans) on CodePen.

キーボード操作イベントのサンプルコード

HTML

<div id="target"></div>

CSS

#target p{
  padding:4px;
  background: #01579B;
  color:#FFF;
  margin:1px;
}

JavaScript

const target = document.getElementById('target');

document.body.addEventListener('keydown',function() {
target.innerHTML += `keydown`;
}, false);

document.body.addEventListener('keypress',function() {
target.innerHTML += `keypress`;
}, false);

document.body.addEventListener('keyup',function() {
target.innerHTML += `keyup`;
}, false);