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

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

[totoronoki]

いっそクレジット番号属性を作ったらいい

[komutan1]

演算できる項目が数値、できない項目は数字。クレカの番号は数値ではないので number を使わない。

[strawberryhunter]

がんばって数字しか入力できないように実装する必要は無いと思う。電話番号にtype="number"を使うのはデータベースで電話番号に整数型を使うようなものだから作っている時に間違いに気が付くだろう。

[deep_one]

コメントを見て。たしかに「クレジットカードの番号」が「数字である」のは単なる慣習に過ぎなくて、あれは「ID」でしかないから極論すれば文字が混じってもいいはずだな。

[tmatsuu]

テンキーレスなキーボードを利用されているフロントエンドエンジニアの皆様、テンキーの存在を忘れないでね。

[harumomo2006]

よく数値だけ入力できるようにって指定されるんだけどそんなのユーザーに任せておけばいいんだよ

[tattyu]

数値入れたら何故か住所氏名が問答無用で叩き込まれるクソフォーム作る奴マジで反省してくれ。

[akiat]

入力した情報をアプリの開発元に送られることもあるし、やっぱりセレクトかプルダウンだな！

[Big_iris]

numpad0-9は常に半角で打てるからよく使ってる キーボード上の数字はあんまり使う機会ない

[uiahi]

全角半角の話かと思ったら違った

[buhoho]

クレカ番号は数値じゃなくてIDなのかな。そりゃそうか