inputタグでtype="number”だと数値以外に「e」が入力できる問題について。「e」を入力させない方法も解説。

なやむくん

数値だけ入力できるようにしたい。

なやむさん

なぜ「e」も入力できるのか知りたい。

などの疑問や悩みを解決してまいります。

type="number”を設定することで、その入力フォームは数値しか入力することができなくなると思っている方が多いかと思いますが実は半角の「e」も入力できてしまいます。

今回はこの「e」は何なのか、そして入力不可にする方法についても解説していきます。

この「e」は何なのか

実際に以下のフォームで入力を試してみてください。

みつた

1文字だけ「e」が入力できたと思います。

そのほかの半角文字については入力できず、全角文字の場合は入力はできますがenterキーを押下すると入力した内容が消えます。

この「e」とは指数表記のexponentialの頭文字からとっており、e は10のべき乗を表します。

みつた

例えば1e6は1×10⁶の計算式を表し、1,000,000と表すことができます。

ただ入力するだけなら問題ないですが、バリデーションを設定したり、入力した値を取得して何らかの処理を実行するとなると予期せぬバグが発生する可能性もあります。

そうならないように「e」を入力できないようにしましょう。

「e」を入力できないようにする

以下のコードを追加することで入力の制御をすることができます。

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

以下で試してみてください。

よろこびくん

「e」が入力できなくなりました！

ちなみに「e」を除く数値以外に入力できる文字は他にもあります。