【Javascript】event.keyで、shiftやcommandキーの入力に反応しないようにしたい

Q&A

Javascript（Typescript）を学習中です。
現在キーボード入力を使った簡単なゲームを作成中なのですが、そこで
文字と数字以外のキーボード入力に反応しないようにしたいです。

現状ソースは以下のような正規表現を使用しています。

 if(e.key.match(/[A-Z]/i)){
  // some code.
}

数値も入力の対象にはしたくないのでこの正規表現を使用しております。
数値入力はこの正規表現ではじく事ができていますが、shift、space、Enter等ははじけず通過してしまいます。

これらはそれぞれ、
e.altKey・e.ctrlKey・e.shiftKeyでそれぞれのキーボード入力に対してif文をかけていくしかないのでしょうか。

ご教示のほど、宜しくお願い致します。

0 likes

2Answer

このドキュメントを読んでください。

ページ中ほどに実際にテストしてみることできるツールもあります。

たとえばEnterキーが押されたときはkeyはEnterという文字列になるので/[A-Z]/iにマッチしてしまっているのだと思います。
なのでパターンを/^[A-Z]$/iにすれば良いのではないでしょうか。

余談になりますが、ある文字列が正規表現に一致するかどうかを知りたいだけなら、matchではなくtestのほうが素直かなと思います。
String.prototype.match() - JavaScript | MDN

1Like

@TaikiTkwkbysh さん
今後同じことが発生した時の為に、consoleデバッグやbreakpointを使って、Ctrlキー入力時の event.key 値を確認するように習慣化してください。

Ctrlキーを入力したとき、event.key には "Control" が入ります。

if(e.key.match(/[A-Z]/i)){
 // some code.
}

"Control" には [A-Z] が 含まれている(部分一致) ので、上記コードではマッチした扱いになります。
正規表現で完全一致を実現するには、^ と $ で括ります。

if (/^[a-z]$/i.test(event.key)) {
  console.log('[a-z] のキーが入力されました');
}

1Like