スマホサイトのフォーム入力で出てくるキーボードを指定する

2016年8月8日更新 view: 404 view
http://www.qubo.jp/media/usability02.png

フォームにフォーカスした際に、自動で最適なキーボードに切り替わることにより、入力ミスが減り、エラーとなることもなくなり、ストレスなく入力が可能になります。

テキスト入力の場合

<input type=”text”>

通常の入力モードです。
ともに日本語入力を表示しています。

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_text.gif

メールアドレス入力の場合

<input type="email" name="email" placeholder="sample@example.com">

メールアドレス型の場合、iOSでは英字のほか「@」「.」が表示されています。(USキーボード)
Androidは専用のパネルはなく、通常の英数字パネルが表示されているようです。

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_email.gif

電話番号入力の場合

<input type="tel" name="tel" placeholder="09012345678">
スポンサードリンク

電話番号やファックス番号の場合は type=”tel” を使います。
これでこの項目にフォーカスされたときには、キーボードが電話番号入力モードになります。

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_tel.gif

数値入力の場合

<input type=”number”>

iOSで数字モードの場合、数字と主な記号が表示されます。(USキーボード)
Androidは英数字パネルが表示されます。

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_number.gif

数字入力の場合

<input type="text" pattern="\d*">

type=’number’ を使うと、0から始まる数字の最初の0が欠けてしまったり、3桁ごとにカンマが入ってしまったりと、場合によっては意図した動作とならないことがあります。
郵便番号や年月日など数字だけを入力させたい場合はpattern="\d*"またはpattern="[0-9]*"を使うと良いです。
この属性を追記すると、0から9の数字以外の入力ができなくなります。
ただし数字以外のハイフン等も同時に入力できなくなってしまいますので、この手法を用いる場合はハイフンの入力が必要ない場合に限ります。

Androidではpattern属性は無視されます。

https://f-tra.jp/blog/wp-content/uploads/2015/02/e706895482ff7691c023ed2c368addd6-300x241.png

パスワード入力の場合

パスワードの場合iosではアルファベットと数字を切り替えるシンプルなキーボードになります。
Androidは英数字パネルの表示。
ともに入力欄へのマスキングが実施されます。

<input type=”password”>
https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_pass.gif

検索項目入力の場合

<input type=”search”>

検索フォーム用の属性を指定すると、決定ボタンの文言およびアイコンが検索バージョンに変化します。

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_search.gif

URL入力の場合

<nput type=”url”>

URLのキーボードでは、「/=スラッシュ」と「.」がピックアップされているのが特徴的です。(iOS)

https://f-tra.jp/blog/wp-content/uploads/2015/02/conpere_url.gif
スポンサードリンク

関連記事

関連カテゴリ