Google Chrome と Firefox ではスピンボタンが実装されていますが、IE では何もありません。この違いは、jQuery の spinner で吸収するのですが、IE のバージョンによって input[type=number] というセレクタが使え無いので、バージョン毎の対応が必要でした。 さらに、IE で HTML5 による入力チェックが働くのは、IE10 以降なのですが、type="number" で 数字以外を入力すると、チェックされずに空文字列がサーバーに送られてしまいます。ですから、type="text" で pattern 属性で同様の対応をしています。 また、逆にスピンボタンを必要としない場合は、Google Chrome と Firefox で非表示にする必要がありますが、その場合は CSS で、ブラウザ毎に対応します。 Google Chrome : -webkit-appearance: none; Firefox : -moz-appearance: textfield;▼ デモページの表示イメージ
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();
$(function(){
var target = null;
if ( userAgent.indexOf("msie") > -1 ) {
if (appVersion.indexOf("msie 10.0") > -1) {
target = $( "input[type=number].num_b" ).spinner()
target.attr( "type", "text" );
target.attr( "pattern", "^[0-9]+$" );
target = $( "input[type=number].num_a" )
target.attr( "type", "text" );
target.attr( "pattern", "^[0-9]+$" );
$("#title").text("今ブラウザは IE 10です");
}
else {
target = $( "#ie9" ).spinner()
$("#title").text("今ブラウザは IE 9 以前です");
}
}
else {
if ( userAgent.indexOf("trident/7.0") > -1 ) {
target = $( "input[type=number].num_b" ).spinner()
target.attr( "type", "text" );
target.attr( "pattern", "^[0-9]+$" );
target = $( "input[type=number].num_a" )
target.attr( "type", "text" );
target.attr( "pattern", "^[0-9]+$" );
$("#title").text("今ブラウザは IE 11です");
}
else if (userAgent.indexOf("firefox") > -1) {
$("#title").text("今ブラウザは Firefox です");
}
else if (userAgent.indexOf("opera") > -1) {
$("#title").text("今ブラウザは Opera です");
}
else if (userAgent.indexOf("chrome") > -1) {
$("#title").text("今ブラウザは Google Chrome です");
}
else if (userAgent.indexOf("safari") > -1) {
$("#title").text("今ブラウザは Safari です");
}
else {
$("#title").text("今ブラウザは 不明なブラウザ です");
}
}
if ( target != null ) {
target.css({"width":"300px" });
}
});
</script>
<style type="text/css">
input[type="number"].num_a::-webkit-outer-spin-button,
input[type="number"].num_a::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type=number].num_a {
-moz-appearance: textfield;
}
* {
font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
font-size: 16px;
}
</style>
<h3 id="title" style='margin-bottom:-10px;'></h3>
<form
method="get"
id="target_form"
target="my_ferame"
action="http://winofsql.jp/php_get.php"
accept-charset="utf-8">
<pre>
<input
type="submit"
name="send"
id="send_check"
value="送信">
▼ type="number" でスピンボタンなし
<input
class="num_a"
type="number"
name="num[]">
▼ type="number" でスピンボタンあり
<input
class="num_b"
type="number"
id="ie9" name="num[]">
</pre>
</form>
<iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>
関連する記事 INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン 参考 Styling new Chrome number input (spin box) - Stack Overflow ※ 参考ページでは、スピンボタンのカスタマイズについて書かれています(自前のスピンボタンの使用)
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
