Friday, January 27, 2012

iOS5 Safari の input[type="number"]

HTML5 での input type 属性では text 以外にも search tel url email range など入力バリエーションが増えていますが、数字の入力制限を行う number では注意が必要です。

ブラウザによっては、先頭の0フィルが除去されたり、カンマ桁区切りが入ったりと、数字として補正されてしまいます。郵便番号や電話番号のように半角数字の文字列として期待していると問題があります。

担当しているスマートフォンサイトで、郵便番号/住所/クレジットカード番号の入力で input[type="number"] を使っていたのですが、iOS5 の Safari から補正が行われるようになったため、緊急修正を行うはめになりました。

Chrome では数値補正されていたので、number を使うことに懸念事項として上がっていましたが、リリース当初に発売されていた実機では問題なかったので、利便性優先で採用していました。

こういう地味な情報に対しても、常にアンテナはってないとなあと痛感しました。