⊗jsPmOEPKG 420 of 505 menu

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キーを押します。 その瞬間、入力されたテキストがインプットフィールドの下の段落に表示され、 インプットフィールドの内容が消去されるようにしてください。

日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否