iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法
2010年10月23日
iPhoneでwebを見ていると、入力フォームでメールアドレスを入力しないといけない時にちゃんとメールアドレス用のキーボード(下記画像)になってない事が多くてちょっとしたストレスをよく感じる。
メールアドレス用キーボード
ちゃんとスペースの隣に「@」と「.」が書かれていて入力しやすい
アプリはちゃんと対応している事が多いのにwebで対応している所はほとんど見た事がない。「アプリは出来るのに何でだよっ！」って思っちゃう。だって人間だもの。怒る事くらいあるよ。
なので探してみました。というか、初めてどっかのサイトでその対応をしているサイトを見つけたので、結構必死に検索しました。スタッフが必死に探しました。見つかりました。感動のご対面でしたが涙は出ませんでした。
Fonland: input タグの type 属性で iPhone のキーボードを切り替える
どうやらinputタグのtype属性をちゃんと書けば良いみたい。
普通のキーボード
[code lang=”html”]<input type="text" />[/code]
検索用キーボード
[code lang=”html”]<input type="search" />[/code]
「Go」が「Search」に変わる(日本語だと「開く」が「検索」に)
URL用キーボード
[code lang=”html”]<input type="url" />[/code]
「/」と「.com」を表示
Eメール用キーボード
[code lang=”html”]<input type="email" />[/code]
「@」と「.」を表示
電話番号用キーボード
[code lang=”html”]<input type="tel" />[/code]
数字と「＋」「＃」「＊」
数字用キーボード
[code lang=”html”]<input type="number" />[/code]
数字と記号を表示
パスワード用キーボード
[code lang=”html”]<input type="password" />[/code]
地球儀アイコンなし(英数のみ)
何これ便利じゃないか。
何でこれ実装してくれないんだろう。html5じゃないと構文的に正しくないから(詳しくは知らないけど)？
スマートフォン対応してるサイトはせっかくなんだからやってほしいなぁってぼやきでした。
ちなみに日本語キーボードだと「email」と「url」は普通と変わりません。そして以前使用していたキーボードの表示方法を変更される感じの仕組みっぽいので、入力欄が「名前」の後に「メールアドレス」となってた場合、メールアドレスの欄に入力を切り替えただけでは何も恩恵を受けられません。そこでUSキーボードに変えたときにはちゃんとメール用にキーボードになるからまぁ気にしないでも良いっちゃ良いんだけど、せっかくなんだからそこの制御も出来たらいいのになぁと思ったので一応ぼやいてみました。
共有とか拡散とかブクマとか
他にこんな事も書いてます
この記事の分類
種類: TIPS, Web制作, 仕事系
ジャンル: html iPhone web制作 キーボード ストレス フォーム 入力 属性 方法
FBでコメント
18個のコメント
参考になりました。
これこれ。
iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK http://t.co/mfQv9967 @anticyborgさんから
“ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/FcMw4xrY
めも | iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 http://t.co/pfnHWbra @STACKSTOCK_twさんから
知らなんだ / “ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/Y5Iu1bVC
SS | iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 http://t.co/gkjtrqZX @STACKSTOCK_twさんから
“ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/hD2qmgzn
“ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/MHzkF2Ed
iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 | STACKSTOCK http://t.co/OYXktt3z
@fenrir_iphone iphoneにはemail用キーボードがあるのですが、サイト参照http://t.co/OaBtxuoyDrキーボードの入力画面が表示される命令を感知して、標準キーボードの上にオーバーレイする形でemail用キーボードを表示出来たりするのでしょうか?
トラックバック/ピンバックはありません。