monoの開発ブログ

iPhoneのSafariで数値を入力するなら<input type="tel">が素敵

意外とアクセスがあるようなので現状について追記。

iOS5ではフリック専用のキーボードが用意されているので、それを利用すれば数字を連続でタイプしても問題ありません。telは本来電話番号を入力するためのタイプで、今後ブラウザによっては問題が起きる可能性もあるので、使っている方がいたら正しい方法に乗り換えるようにしてください。

以下元記事。

HTML5ではinput要素のtype属性が多数追加されており、iPhoneのMobile Safariでもその一部を利用することができるようになっています。その中には数値を入力するための<input type="number" />も存在しているのですが、現在のiPhoneの実装では同じ数字を連続してタイプすると記号になってしまうため使い勝手がよくありません。

以前記号を強引に数値に変換するjQueryプラグインを作成したこともあるのですが、そうした小細工を利用しなくても電話番号を入力するための属性である<input type="tel" />を利用すれば数値だけを入力させることができるようなので紹介したいと思います。

以下のページで動作を確認することができます。

QRコード

type属性にnumberを指定した場合、最初から数値入力のページが表示されるのですが、動作は通常時と同じなので同じ数字を連続してタイプすると記号になってしまいます。

&lt;input type=\"number\"&gt;

telを指定すると、電話番号入力専用のページが表示されます。ここでは数値(と一部の記号)しか入力できないため、すばやく数値を入力できます。

&lt;input type=\"tel\"&gt;

とここまで書いたのですが、電話番号用のtelを安易に使用するのはちょっと微妙な気がします。iPhoneの場合のみJavaScriptで動的にtypeを書き換える、みたいなことができればいいのですが、type属性は書き換えられないのでできません。となると、input要素を作り直して置換するくらいしかないと思うのですが、type以外の属性をどうすればいいのか悩んでいて今のところ解決していません。