CHROMA

世の中の "当たり前" を確認する

モバイル用にフォームを作る時の input type="number" と type="tel"

モバイル用のフォーム作ってた時、電話番号と郵便番号にあてる input 要素の type 属性は何がいいんだろうなーと。
iOS7 の Safari で確認した。

ipnut type="tel" を指定した場合の問題

  • ハイフン記号を使おうとした場合、キーボードの変更ができない
  • 郵便番号に type="tel" を使うのはセマンティック的にどうなの?という問題

ipnut type="number" を指定した場合の問題

  • novalidate 属性を form 要素に指定してバリデーションチェックを行わないようにした場合、送信ボタンを押してエラー画面に遷移すると入力した値が消える(これは僕が作業してる環境でのみ起こった問題かもしれない.. )
  • ハイフン記号がブラウザ標準のバリデーションチェックに引っかかる

ハイフン記号、pattern 属性でハイフン使うパターンを登録して上書きできるかと思ったけどダメだた.. :

<input type="number" name="zipcode" pattern="\d{3}[\-]\d{4}|\d{7}">

対応

今回の対応では 1 を取った

1. 電話番号、郵便番号共に type="tel" を使う

良い点: キーボードが数字入力(電話番号入力)専用で開くようになる
悪い点: 郵便番号に type="tel" を指定するのが HTML のセマンティクス的にうんちゃらかんちゃら..

2. type="number", type="tel" を使わず、type="text" を使う

良い点: 不可解なことが行りにくく、どのデバイスでも一番危険性少ないかと思う
悪い点: 入力の際、キーボード変更が必要になる

一番初めに出したいキーボードのことを特に定めず、ブラウザのバリデーションチェックのみを利用したいなら type="text"pattern 属性を指定したら良い。

余談

novalidate 属性を form 要素に指定してバリデーションチェックを行わないようにした場合、送信ボタンを押してエラー画面に遷移すると入力した値が消える

type="number" 使った時に起こったこの問題は type="tel"type="email" では起こらなかったのが摩訶不思議アドベンチャー

参考