数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話 - Qiita

数値入力で input[type="number"]を使ったら、ユーザから問い合わせが増えてしまった話HTMLUXTypeScriptReact この記事は SmartHR Advent Calendar 2020 23 日目の記事です。 こんばんは！ @diescake です。 今年は、React で「そこそこの規模で、そこそこ機能のフォームアプリケーション」を設計・実装する機会がありました。 技術選定で formik + yup を選んだので、その選定理由と結果を共有しよう！ ……そんなふうに考えていた時期が私にもありました。 驚くほど筆が進まず、いつの間にやら当日どころか既に夜になってしまったので tips 的な話に逃げる運びとなりました。ご了承ください。 というわけで、数値入力フォームに何気なく input[type="number"] を利用したら、ユーザから問い合わせが増えてし

[triggerhappysundaymorning]

ieならむしろime-modeがあるからな……inputmodeはどうだっけ……？

[t_f_m]

2020年12月の記事

[Cherenkov]

なかなかうまいこといかないなー。

[PrivateIntMain]

全角数字ってStandardじゃないから仕方ないものの、そのせいで対応増えるのはとても大変。

[yarumato]

“ユーザのIMEで全角入力のまま数字キーを叩いてたことが原因。 全角数字はvalidな数値として扱われない。結局の所、数値入力フォームは input[type="text"] として自由に入力して貰ってからサニタイズ、フォーマット”

[dorapon2000]

“全角数字は valid な数値として扱われないため、キーを叩いてもフォームは反応しません。”

[dec123456789]

htmlのこれ系の機能って痒い所に手が届かないし各ブラウザやOSで微妙に挙動が違うしで、結局自分で実装するか誰かが作ってるコンポーネントを使うハメになるんだよな。

[ghostbass]

PCブラウザでのこの辺の対応はいまだに厄介。