2013年12月18日(水)～19日(木)
<input type="number"> #■パソコン・通信 HTML5で採用された<input>の属性を、詳しく勉強しました。
新しい属性が、どのブラウザにどれくらい対応しているかは、参考にした幾つかのサイトでは、足並みが揃っていないばかりか、間違っている箇所も見受けられました。進化の途中って、整理するのが難しいんですよね。そこで、下記の最新ブラウザで検証してみました。
・IE
11.0.9600.16476
・Firefox
26.0
・Safari
5.1.7(7534.57.2)・・・Windows用最終版？
・Google
Chrome
31.0.1650.63
m
・Opera
12.16
・Luscape
6.8.10.27186
・Trident
11.0.9600.16476
・Gecko
Plugin
3.6.28/Gecko
1.9.2.28
・WebKit
Plugin
1.3.7/WebKit
535.3
r95080
なお、Safari(iPhone)では、下記の属性はすべて有効ではなく、type属性はtype="text"として扱われます。Androidスマホは、保有していないので未確認です。
【type="number"
min="*"
step="*"】
数字入力欄の右側の上下のボタンを「スピンボタン」と呼びます。
<input
type="number"
value="0"
min="0"
step="1000"
name="yen"
style="text-align:right;">円
※min：最小値、step：ステップ（初期値1）
上記のように、記述しておけば便利ですね。1000円単位で上下できて、マイナスにはなりません。
データベースしかり、Excelでも、「入力規則」が当たり前のように備わっているのに、HTML5では既定していないのでしょうか、ブラウザ対応はまちまちです。
・スピンボタンあり、入力規則有効
Google
Chrome,
Opera
※Operaでは、文字の右寄せもしてくれます。
・スピンボタンあり、入力規則なし
（数字要求あり。入力サポートまで。）
Safari,
Lunascape[WebKit]
・スピンボタンなし、入力規則有効
IE,
Lunascape[Trident]
※minは内容まで警告してくれるが、stepは警告だけ。
・スピンボタンなし、入力規則なし
（type="text"と同じ。）
Firefox,
Lunascape[Gecko]
結局、IE11の中途半端な対応が致命的で、stepの利用ができず、JavaScriptでチェックしないといけませんね。その項目の入力完了時にチェックするか(onChage)、送信時にチェックするか(onSubmit)の２種類の方法が考えられます。
【step="0"】
エラーと認識されるのか、スピンボタンで初期設定通りの増減1となります。
【step="any"】
<input
type="number"
step="any">
※スピンボタン非表示ではありません。
・スピンボタン表示、増減0
Safari
・スピンボタン表示、増減1
Google
Chrome,
Opera,
Lunascape[WebKit]
【電話番号】
<input
type="tel">
※正規表現で制限を掛けなければ、余り意味がありません。
【メールアドレス】
<input
type="email">。
・*@*.*の入力形式
なし。ガレコレでは、JavaScriptでチェックする。
・*@*の入力形式
IE、Firefox、Google
Chrome、Opera、Lunascape[Trident]
・未対応
Safari,
Lunascape[Gecko,WebKit]
【入力必須】
<input
type="*"
required>
※パソコンでは、Safariのみ未対応。Windows版は1年以上も古いので、Mac版などはきっと有効なのだろう。
【オートフォーカス】
HTML文書のロード後、フォーカスします。
<input
type="*"
autofocus>
※パソコンでは、すべてのブラウザが対応。もちろん、古いブラウザであるIE8では、非対応。
【利用できそうな属性】
type="number"
type="email"
required
autofocus
※IE8などにも対応させるには、JavaScriptで記述します。
スピンボタンを表示させない方法を調べてみると、下記のような記述を見つけました。
<style
tyle="text/css">
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance:none;
margin:0;
}
</style>
Safari、Google
Chrome
では、数字入力において、スピンボタンが入力欄の内側に表示されているので、::-webkit-inner-spin-buttonの擬似クラスを指定するだけで効果があります。Opera
では、外側にあるので、outerの方で効くかと思いきや、非表示になりません。もともと、ブラウザの描写エンジンが、WebKitじゃありませんからね。-webkit-
は、CSSに正式採用されると、これが取れた表現になるのでしょう。
つまり、下記のように記述すると、指定したidのスピンボタンだけが消えます。
<style>
#id_zip::-webkit-inner-spin-button
{
-webkit-appearance:none;
}
</style>
<input
type="number"
id="id_zip">
なお、inputタグのCSSが細かく指定できなくて、今まで不便だなあと思っていたら、下記のように記述できたんですね。ひょうたんから駒で、いいもん見っけました。
<style>
input[type=number]
{
color:red;
}
input[type=text]
{
color:blue;
}
input[type=submit]
{
color:lime;
}
</style>
P.S.
Windows用Safariは、2012年5月9日以来、提供されていないんだね。挙動が、古くておかしいと思ったもん。Windowsでのチェックは、もう意味がないので外します。
http://support.apple.com/kb/dl1531?viewlocale=ja_JP
P.S.2
Lunascapeは、３つのエンジンを最新版でサポートしていくのが、無理になっているご様子。チェックから外します。
P.S.3
Windows版では、Google
Chromeが一番いいブラウザだと判断します。IE開発者の頭の中を疑いますね。
お問い合わせ