ページ

2013/07/16

郵便番号フィールドにinput[type="number"]を使ってはいけない

スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを
数字キーボードにしたいという要望があったので
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"] を適用するのも
またろくでもないことになりそうだったのでやめておきました。