KeyboardEvent.keyCodeが非推奨になってた

掲載日

はじめに

このサイトに検索機能を付けた際に、検索枠でエンターキーを押下したら検索するようにしました。
その際、「javascriptでは確かevent.keyCodeでどのキーを押したか取得できるんだよな~」と手癖で入力したら非推奨になっていたようでエディタが教えてくれました。
 

KeyboardEvent.keyCodeは非推奨になっているアラートを出してくれるエディタのスクリーンショット。

 

MDNを調べたところ、「これからはKeyboardEvent.codeを使用してください」とのこと。
というわけで、これからは「エンターキー押下で処理を実行」のような処理を実装する場合以下のように書く必要があります。

const keydownSearch = async (event: KeyboardEvent) => {
    if (!event) {
        return
    }

    if (!event.code) {
        return
    }

    if (event.code == 'Enter') {
        // Enterキー押下時に実行したい処理
    }
}

keyCodeの時は数字で判定していましたが、今後は直感的に分かりやすい名称で判別できそうです。

 

他にも「KeyboardEvent.key」を使った判別も可能です。codeとkeyの違いは以下の通りです。

KeyboardEvent.code

(キー入力によって入力された文字ではなく)キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。

KeyboardEvent: code プロパティより引用

キーボードレイアウトや修飾キーの状態によって変更される前の値」ということなので、例えば「Shiftキーを押しながらaキーを押した」したケースも「他のボタンを押した状態でなくaキーを押した」したケースも「どちらもaキーを押した」として扱い、コードを返してくれます。
例の場合、どちらも「KeyA」が返ってきます。

自分のケースのように、「Enterキーを押下したら検索処理に進む」程度の動作であればcodeで十分だと思います。

KeyboardEvent.key

ユーザーが押したキーの値を、 Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。

KeyboardEvent: key プロパティより引用

Shift キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値」なのでcodeとは逆に「Shiftキーを押しながらaキーを押した」ケースと「他のボタンを押した状態でなくaキーを押した」ケースで別々の値を返します。

例の場合、前者なら「A」を、後者なら「a」を返り値として与えてくれます。
ゲームやイラスト加工ツールなど、キーボードに沢山ショートカットを登録する必要があるケースではこちらを使用するのが望ましいのかなと思います。

なぜ非推奨に?

これだけだと難なので、非推奨になった理由を調べました。
W3C Working Draftには以下のように書かれています。

 

7. Legacy Key & Mouse Event Attributes

This section is non-normative. The following attributes are obsolete and should only be implemented by user agents that require compatibility with legacy software that requires these keyboard events.

 

These features were never formally specified and the current browser implementations vary in significant ways. The large amount of legacy content, including script libraries, that relies upon detecting the user agent and acting accordingly means that any attempt to formalize these legacy attributes and events would risk breaking as much content as it would fix or enable. Additionally, these attributes are not suitable for international usage, nor do they address accessibility concerns.

 

Therefore, this specification does not normatively define the events and attributes commonly employed for handling keyboard input, though they MAY be present in user agents for compatibility with legacy content. Authors SHOULD use the key attribute instead of the charCode and keyCode attributes.

However, for the purpose of documenting the current state of these features and their relation to normative events and attributes, this section provides an informative description. For implementations which do support these attributes and events, it is suggested that the definitions provided in this section be used.

W3C Working Draft より引用

 

大事そうなのは以下の部分。

 

These features were never formally specified and the current browser implementations vary in significant ways.

ざっくり、「これらの機能はこれまで正式に仕様が定められたわけではなく、かつ現在のブラウザの実装とは大きく異なる」という感じでしょうか。

「ブラウザによって実装がバラバラだったのでもう使わないでね」ということだと理解しました。

多くの場合、実装するのはエンターキーのような主要なキーを押下した際の動作だったり、主要なブラウザ(おそらくIE)に合わせた動作だけだったので、ライトな使用ではあまり問題にならなかっただけで、ブラウザゲームの制作現場とかではブラウザ毎の実装差分で泣いていたりしたのかもしれません。

記事の作成者のA.W.のアイコン

この記事を書いた人

A.W.
茨城県在住Webエンジニアです。 PHPなどを業務で使用しています。 趣味ではGoやNuxt、Flutterをやってます。

Comment