iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法

2010年10月23日

iPhoneでwebを見ていると、入力フォームでメールアドレスを入力しないといけない時にちゃんとメールアドレス用のキーボード(下記画像)になってない事が多くてちょっとしたストレスをよく感じる。

メールアドレス用キーボード

画像 224

ちゃんとスペースの隣に「@」と「.」が書かれていて入力しやすい

アプリはちゃんと対応している事が多いのにwebで対応している所はほとんど見た事がない。「アプリは出来るのに何でだよっ!」って思っちゃう。だって人間だもの。怒る事くらいあるよ。

なので探してみました。というか、初めてどっかのサイトでその対応をしているサイトを見つけたので、結構必死に検索しました。スタッフが必死に探しました。見つかりました。感動のご対面でしたが涙は出ませんでした。

Fonland: input タグの type 属性で iPhone のキーボードを切り替える

どうやらinputタグのtype属性をちゃんと書けば良いみたい。

普通のキーボード

<input type="text" />

画像 218

検索用キーボード

<input type="search" />

画像 221

「Go」が「Search」に変わる(日本語だと「開く」が「検索」に)

URL用キーボード

<input type="url" />

画像 223

「/」と「.com」を表示

Eメール用キーボード

<input type="email" />

画像 224

「@」と「.」を表示

電話番号用キーボード

<input type="tel" />

画像 222

数字と「+」「#」「*」

数字用キーボード

<input type="number" />

画像 226

数字と記号を表示

パスワード用キーボード

<input type="password" />

画像 225

地球儀アイコンなし(英数のみ)

何これ便利じゃないか。

何でこれ実装してくれないんだろう。html5じゃないと構文的に正しくないから(詳しくは知らないけど)?

スマートフォン対応してるサイトはせっかくなんだからやってほしいなぁってぼやきでした。

ちなみに日本語キーボードだと「email」と「url」は普通と変わりません。そして以前使用していたキーボードの表示方法を変更される感じの仕組みっぽいので、入力欄が「名前」の後に「メールアドレス」となってた場合、メールアドレスの欄に入力を切り替えただけでは何も恩恵を受けられません。そこでUSキーボードに変えたときにはちゃんとメール用にキーボードになるからまぁ気にしないでも良いっちゃ良いんだけど、せっかくなんだからそこの制御も出来たらいいのになぁと思ったので一応ぼやいてみました。

他にこんな事も書いてます

FBでコメント

17個のコメント

  1. ホスト  より:

    参考になりました。

  2. これこれ。
    iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK http://t.co/mfQv9967 @anticyborgさんから

  3. @dk19810313 より:

    “ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/FcMw4xrY

  4. めも | iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 http://t.co/pfnHWbra @STACKSTOCK_twさんから

  5. 知らなんだ / “ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/Y5Iu1bVC

  6. SS | iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 http://t.co/gkjtrqZX @STACKSTOCK_twさんから

  7. @miu0512 より:

    “ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/hD2qmgzn

  8. @kubosho_ より:

    “ iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 : STACKSTOCK” http://t.co/MHzkF2Ed

  9. @kanchi_206xtp より:

    iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法 | STACKSTOCK http://t.co/OYXktt3z

  10. @Pup4d より:

    @fenrir_iphone iphoneにはemail用キーボードがあるのですが、サイト参照http://t.co/OaBtxuoyDrキーボードの入力画面が表示される命令を感知して、標準キーボードの上にオーバーレイする形でemail用キーボードを表示出来たりするのでしょうか?

トラックバック/ピンバックはありません。