HTML5のinput要素type属性、各種ブラウザでのキーボードの表示

更新:

HTML5で追加されたinput要素のtype属性を最新のブラウザで動作テスト。iOS 8+Safari、スマホ Android 5+Chrome、Windows+Internet Explorer 11およびFirefox 40。

HTML5のinput要素type属性

だいぶ前の話だが、HTML5でinput要素のtype属性にnumber、email、telなどが追加された。
これらの属性値を指定すると、スマホではテキストボックスに文字を入力する際、最適なキーボードが予め表示される場合がある。
また、ブラウザによってはバリデーション(適切な文字列が使われているかチェック)するものもある。
2015年現在たいていのブラウザはHTML5に対応しているが、現在最新のブラウザで動作を確かめてみた。
使用した端末は、iPod touch第6世代(iOS 8+Safari)、ファーウェイP8lite(Android 5+Chrome)、Windows PC(Windows 7+Internet Explorer 11およびFirefox 40)で、OSやブラウザが同じでも機種により動作が異なる場合がある。
また、属性はtype、value、nameのみ使用。


input type="text"

これはHTML5以前からある属性値で、とりあえず動作を確認。
iPod touch第6世代(Safari)、ファーウェイP8lite(Chrome)ともに日本語かな入力が表示される。
input type=text iPod touch第6世代(iOS 8+Safari) input type=text ファーウェイP8lite(Android 5+Chrome)


input type="number"

iPod touch第6世代(Safari)、ファーウェイP8lite(Chrome)ともに数字入力になる。
Chromeでは数字以外は入力できない。
WindowsのInternet Explorer 11も数字以外は入力できない。
Windows版Firefox 40では数字以外も入力できるが、submit時に警告が表示される。
input type=number iPod touch第6世代(iOS 8+Safari) input type=number ファーウェイP8lite(Android 5+Chrome)


input type="email"

iPod touch第6世代(Safari)では日本語かな入力が表示される。
ファーウェイP8lite(Chrome)はアルファベットが表示され、メールアドレスに使えない文字を入力すると警告が表示され、submit時にも警告が表示される。
WindowsではInternet Explorer 11、Firefox 40ともにsubmit時に警告が表示される。
input type=email iPod touch第6世代(iOS 8+Safari) input type=email ファーウェイP8lite(Android 5+Chrome)


input type="tel"

iPod touch第6世代(Safari)、ファーウェイP8lite(Chrome)ともに数字入力になる。
ただし、Safariはハイフンがない。
input type=tel iPod touch第6世代(iOS 8+Safari) input type=tel ファーウェイP8lite(Android 5+Chrome)


input type="url"

iPod touch第6世代(Safari)、ファーウェイP8lite(Chrome)ともにアルファベット入力になる。
Safariは上記type="email"では日本語かな入力になるが、こちらはきちんとアルファベットになる。
Safari以外バリデーションが働き、警告が出るタイミングは上記type="email"と同じ。
input type=url iPod touch第6世代(iOS 8+Safari) input type=url ファーウェイP8lite(Android 5+Chrome)


input type="search"

iPod touch第6世代(Safari)、ファーウェイP8lite(Chrome)ともに日本語かな入力になる。
input type=search iPod touch第6世代(iOS 8+Safari) input type=search ファーウェイP8lite(Android 5+Chrome)


iPod touch第6世代(Safari)は、以上の属性値ではバリデーションが働かなかった。
意外にも?Internet Explorer 11はバリデーションが働いた。
追加された属性値は他にもたくさんあるが、追加された中で今後使おうと思えるのはnumberだけかな・・・。
このエントリーをはてなブックマークに追加