JavaScriptでのキー押下の取得
Eventオブジェクトを使用して、
押されたキーを取得することができます。
その方法を見てみましょう。
まず、インプットフィールドがあるとします:
<input>
変数にその要素への参照を取得します:
let elem = document.querySelector('input');
キーが押されるたびに発火するイベントを インプットフィールドに設定します:
elem.addEventListener('keypress', function(event) {
});
イベントオブジェクトの key プロパティには
押された文字が格納されます:
elem.addEventListener('keypress', function(event) {
console.log(event.key);
});
また、code プロパティには
押されたキーのコードが格納されます:
elem.addEventListener('keypress', function(event) {
console.log(event.code);
});
入力されたキーの値とそのコードを 表示するインプットフィールドを作成してください。
インプットフィールドで様々なキーを押し、 どのような値とコードになるか確認してください。
Enterキーのコードを特定してください。
BackSpaceキーのコードを特定してください。
段落とインプットフィールドがあります。
テキストを入力してEnterキーを押します。
その瞬間、入力されたテキストがインプットフィールドの下の段落に表示され、
インプットフィールドの内容が消去されるようにしてください。