モバイル用にフォームを作る時の 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" では起こらなかったのが摩訶不思議アドベンチャー。
