ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり

ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。

KeyboardEvent - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent

Why the GOV.UK Design System team changed the input type for numbers – Technology in government
https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

I can’t use my number pad for 2FA codes – Terence Eden’s Blog
https://shkspr.mobi/blog/2024/04/i-cant-use-my-number-pad-for-2fa-codes/

◆<input type="number">の使用は避けるべし
HTMLのinput要素には「number」という型が用意されており、数値の入力欄をページ内に挿入できます。しかし、number型には複数の問題が存在するため、クレジットカードや電話番号の入力欄への使用は避けるべきです。

例えば、PC版のFirefoxやChromeでは、number型の入力欄に数値を上下させるボタンが配置されます。この数値調整ボタンは一見すると便利ですが、上下方向の矢印キーを押しても数値が変化するため、誤入力のリスクが高まります。

また、ウェブブラウザによっては「数値を勝手に四捨五入する」「大きな数字を指数表示になおす」「勝手に『,』を挿入する」といった操作が実行される場合もあります。例えば、以下のムービーではSafari 5.1がクレジットカード番号入力欄の入力内容を勝手に編集してしまう様子を確認できます。

Safari 5.1 attempting a more human readable number on blur - YouTube


Mozillaのウェブ開発ドキュメント集「MDN Web Docs」では、上記の理由からnumber型は数値の増減が必要な入力欄にのみ使用するように推奨されています。また、MDN Web Docsは数値の入力欄の実装方法として「input要素にinputmode属性を付与する」という手法を推奨しています。例えば、スマートフォンでは「inputmode="numeric」という属性を付与することで入力可能なデータを数値のみに制限できます。

◆テンキーの存在を考慮するべし
JavaScriptのKeyboardEventオブジェクトを用いると、「数値キーの入力のみ許可する」という処理を実現できます。しかし、数値キーの識別方法を誤ると、テンキーでの数値入力も除外してしまうことになります。

KeyboardEventオブジェクトには、「key」と「code」というプロパティが存在しており、keyでは「ユーザーが押したキーの値」を、codeでは「ユーザーが押したキーのキーコード」を取得できます。

「テンキー」と「キーボード上段の数字キー」では、入力できる数字は同じでもキーコードが異なっています。例えば、テンキーの「1」のキーコードは「Numpad1」ですが、キーボード上段の数字キーの「1」のキーコードは「Digit1」です。つまり、codeプロパティを用いて入力キーを識別した場合、テンキーとキーボード上段数字キーは異なるキーとして認識されるというわけ。このため、codeプロパティを用いて「Digit0～Digit9の入力のみ許可する」というコードを書いた場合、テンキーでの入力も拒否してしまうことになります。

一方で、keyプロパティを用いて「0～9の入力のみ許可する」というコードなら、テンキーとキーボード上段の数字キー双方を受けつけることができます。