はじめに
こんにちは、学生エンジニアの @huyunoki です！
今回はWebアプリケーション開発で遭遇した「え、なんで？」と思わず首を傾げた謎の現象と、その確実な対策について記事にしていきます。
その現象というのが、こちらです。
HTMLの <input type="number"> を使っているのに、なぜかアルファベットの e が入力できてしまう…。数字しか受け付けないはずなのに、これはバグなのでしょうか？
なぜ「e」だけは特別なのか？
結論から言うと、これはバグではありません。HTMLの仕様としてブラウザが e を数値の一部として正しく解釈しているからです。
この謎の鍵は「指数表記」にあります。
eの正体は「10の累乗」を示す記号
科学や数学の世界では、「1000」を 1e3（1かける10の3乗）、「0.001」を 1e-3 のように表現します。
<input type="number"> は単なる整数や小数の入力だけでなく、この指数表記を含むすべての数値形式を受け付けるように設計されています。
つまり、ブラウザは入力された e をアルファベットではなく、「数値を構成する有効な記号」として扱っているため、バリデーションを通過してしまうのです。
eの入力を完全に防ぐ方法
実装コード
以下の onkeydown 属性を <input> タグに直接記述します。
<!-- キーコード 69 (e または E) の入力を防ぐ -->
<input type="number" onkeydown="return event.keyCode !== 69" />
解説:
-
onkeydown: キーが押された瞬間に処理を実行するHTML標準のイベント属性です。 -
event.keyCode !== 69: 押されたキーのコードが69（Eまたはe）ではない場合にのみtrueを返し、キー入力を許可します。
まとめ
Web開発者を悩ませる e の入力はHTMLのバグではなく、数値の仕様（指数表記）をブラウザが真面目に解釈している結果でした。
-
簡易対策：
onkeydown="return event.keyCode !== 69"でeの入力を無効化する。
最後まで読んでいただき、本当にありがとうございました！
この記事が、web開発をしている方たちの手助けとなれば幸いです。
参考記事