厳密には、LWC では keydown イベントは制御できないようです。
検索すると対応方法の事例は見つかりますが、私が確認する限り再現できませんでした。
事例
例えば、テキストエリアでEnter キーを押した時に発火するイベントを作るとします。
次のようなコンポーネントを用意します。
HTML
<input onkeydown={handleKeyDown}>
JavaScript
// ボタン押下時のハンドル handleKeyDown(event) { // event の keyCode で押されたキーを判定 if(event.keyCode === "Enter") { console.log("Enter キーが押された"); } }
このコンポーネントで想定する操作をするとハンドル自体は発火しますが、ハンドルの引数 event
は undefined
になるためエラーになってしまいます。
公式の回答
下記のドキュメントを見る限り、onkydown 属性はサポート外のようです。
コンポーネントの HTML イベントをリスンできるように基本 Aura コンポーネントを HTML 要素でラップする場合、イベントハンドラを基本 Lightning Web コンポーネントに移動します。たとえば、lightning:input ではいくつかのイベントハンドラがサポートされますが、onkeydown はサポートされません。ただし、Aura を使用すると、keydown イベントを処理する div ラッパーを作成できます。
onkeypress
属性も同様です。
発火自体はしますがキーの判定ができないので、キー操作関連をLWC で実装するのは難しいかもしれません。
もし、LWC でキー操作を実現する場合は留意が必要そうですね。