スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを数字キーボードにしたいという要望があったので
input[type="number"] や input[type="tel"] を使えば良いと聞いていた俺は
それぞれ郵便番号と電話番号のフィールドの type を text から変更したのだけど
input[type="number"] には罠があったので共有します。
input[type="number"] というよりは iOS の Safari にある罠です。
iOS の Safari は input[type="number"] のフィールドで入力値がゼロ始まりの数値の場合、頭のゼロを自動で除去する
この仕様…あのおせっかいな Excel を思い出す仕様だぜ…ｷﾞﾘｯ…例えば皇居の郵便番号 100-0001 は分割された郵便番号フォームの後ろの部分が以下のように頭ゼロになります。
-
表示上は iOS でも全く問題ないのだけれど POST するタイミングで iOS の Safari は 0001 を 1 に変換します。
ベーシックなバリデーションで郵便番号 7 桁とか判定して 7 桁入力してくださいとかエラー出すと
ユーザーは 7 桁入力したのにとなるので確実にクレームものです。
iPhone を普段使いしていない僕は完全に油断してやられました。
iOS のみで起こり、input[type="number"] でゼロ始まりの数値を POST した時にようやく分かるバグです。
全く油断もすきもありません。
とりあえず対処として input[type="text"] に戻しました。
input[type="tel"] に変えるのも一瞬考えましたが
電話番号でないフィールドに input[type="tel"] を適用するのも
またろくでもないことになりそうだったのでやめておきました。