【Salesforce】【LWC】LWC では keydown イベントを取得できない

厳密には、LWC では keydown イベントは制御できないようです。
検索すると対応方法の事例は見つかりますが、私が確認する限り再現できませんでした。

developer.mozilla.org

事例

例えば、テキストエリアでEnter キーを押した時に発火するイベントを作るとします。
次のようなコンポーネントを用意します。

HTML

<input onkeydown={handleKeyDown}>

JavaScript

// ボタン押下時のハンドル
handleKeyDown(event) {
    // event の keyCode で押されたキーを判定
    if(event.keyCode === "Enter") {
        console.log("Enter キーが押された");
    }
}

このコンポーネントで想定する操作をするとハンドル自体は発火しますが、ハンドルの引数 eventundefined になるためエラーになってしまいます。

公式の回答

下記のドキュメントを見る限り、onkydown 属性はサポート外のようです。

developer.salesforce.com

コンポーネントの HTML イベントをリスンできるように基本 Aura コンポーネントを HTML 要素でラップする場合、イベントハンドラを基本 Lightning Web コンポーネントに移動します。たとえば、lightning:input ではいくつかのイベントハンドラがサポートされますが、onkeydown はサポートされません。ただし、Aura を使用すると、keydown イベントを処理する div ラッパーを作成できます。

onkeypress 属性も同様です。

developer.mozilla.org

発火自体はしますがキーの判定ができないので、キー操作関連をLWC で実装するのは難しいかもしれません。
もし、LWC でキー操作を実現する場合は留意が必要そうですね。

©︎2017-2018 WebSandBag