【HTML5】input type=”number”で「e」が入力できてしまう問題の解決法

HTMLのinputタグで、数値入力のみを受け付ける属性としてtype=”number”というものがある。

<input type="number" name="" value="">

実はこのタグ、数値のほかにアルファベットの「e」を入力することができてしまう。

理由としては指数表現で「e」を使うケースがあるので、これに対応するために入力を受け付けるようにしているのだ。

ただし、場合によっては「e」を受け付けることで想定外のバグを起こす可能性があるので、今回はこの問題の解決法を紹介する。

「e」の入力を制限する

inputタグに下記のonkeydown属性を追加する。

<input type="number" onkeydown="return event.keyCode !== 69" name="" value="">

コードの意味を解説すると、何らかの入力があった際に入力されたキーコードを取得し、コード69（eを表す）と一致しない場合のみ入力された値を返すというわけだ。

これで「e」の入力を制限することができる。