SQLの窓

2014年11月21日


INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン

INPUT type="number" の振る舞いをブラウザ間で調整する でテストした結果を元に、jQuery のプラグインを作成しました。

対応するに値するのは、Chrome と Firefox と IE11(10) だけです

ブラウザは、Google Chrome と Firefox と IE だけです。さらに、Google Chrome のスピンボタンを非表示にする為に、INPUT 要素には id が必須となっています。その場合は、後から表示するような実装はしていません。IE の場合は、スピンボタンが最初から無いので、JQuery UI の spinner を使うようにしています。ただ、IE の入力チェックが type="number" に対して他のブラウザのように動作しないので、type="text" に変更した上で、pattern 属性でチェックさせている為、0〜9 の文字しか入らない実装になっています。

※ IE9 以前で、autoNumber.js を実装するようにしました。

Opera と Safari for Windows をテストしました

どちらも問題あるので、結局 IE9 以前と同じ対応になっています。
( Safari for Windows は Apple で長い間バージョンアップされていません )


<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">
$.fn.extend({ 
	type_number: function(option){

		// オプションが省略された場合の対応
		option = option || {};
		// INPUT 要素のみ対象
		if ( $(this).prop("tagName").toUpperCase() != 'INPUT' ) {
			return;
		}

		var userAgent = window.navigator.userAgent.toLowerCase();
		var appVersion = window.navigator.appVersion.toLowerCase();

		if ( userAgent.indexOf("msie") > -1 ) {
			if (appVersion.indexOf("msie 10.0") > -1) {
				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
				else {
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
			}
			else {
				// IE9 以前で autoNumeric で数値以外を入力不可にする
				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}
			}
		}
		else {
			if ( userAgent.indexOf("trident/7.0") > -1 ) {
				// ※ IE11
				// 'on' と 'jquery', で spinner を使う, それ以外はスピンボタン無し
				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}
				else {
					$(this).attr( "type", "text" );
					$(this).attr( "pattern", "^[0-9]+$" );
				}

			}
			else if (userAgent.indexOf("firefox") > -1) {
				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
				if ( option.spin != 'on' ) {
					// spinner を使う
					if ( option.spin == 'jquery' ) {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$(this).css({ "-moz-appearance": "textfield" });
								$(this).spinner(option);
							}
						});
					}
					else {
						$(this).css({ "-moz-appearance": "textfield" });
					}
				}

			}
			else if (userAgent.indexOf("opera") > -1) {
				// スピンボタンが表示されますが、消す方法が見つからないので
				// IE と同じく jQuery で対応したほうがよさそうです。また、
				// FORM の送信で数字以外の文字のチェックがされないので、
				// 数字のみ入力させるプラグインをさらに実装する必要があります
				// ※ autoNumeric.js は type="text" でのみ有効です
				$(this).attr( "type", "text" );

				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}

				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}
			}
			else if (userAgent.indexOf("chrome") > -1) {
				// 標準スピンボタンは 'on', spinner を使う場合は 'jquery', それ以外はスピンボタン無し
				if ( option.spin != 'on' ) {
					// spinner を使う
					if ( option.spin == 'jquery' ) {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
								$(this).spinner(option);
							}
						});
					}
					// スピンボタンを非表示にする為に、スタイル要素を追加
					// ( id があるという前提と、後から表示に切り替える事は考えていない )
					else {
						$(this).each(function(){
							if ( $(this).prop("type").toUpperCase() == 'NUMBER' ) {
								$('head').append('<style>#'+$(this).attr('id')+'::-webkit-outer-spin-button,#'+$(this).attr('id')+'::-webkit-inner-spin-button{-webkit-appearance:none;}</style>');
							}
						});
					}
				}
			}
			else if (userAgent.indexOf("safari") > -1) {
				// Google Chrome の劣化版でした。そもそも最近に
				// バージョンアップされていない気がします。コード
				// 自体は Google Chrome と同じで見た目は同様の
				// 結果になりますが、FORM の送信で数字以外の文字
				// のチェックがされないので、数字のみ入力させる
				// プラグインをさらに実装する必要がありますが、
				// autoNumeric.js は type="text" でのみ有効なの
				// で、Opera と同じコードになります

				$(this).attr( "type", "text" );

				var el = this;
				var s = document.createElement("script");
				s.src="http://winofsql.jp/jquery/plugins/number/autoNumeric.js";
				if(s.addEventListener) {
					s.addEventListener("load",callback,false);
				} 
				else if(s.readyState) {
					s.onreadystatechange = callback;
				}
				document.body.appendChild(s);
				function callback() { 
					$(el).autoNumeric('init', {aSep:'',mDec:'0'});
				}

				if ( option.spin == 'on' || option.spin == 'jquery' ) {
					$(this).spinner(option);
				}

			}
			else {
			}
		}

	}
});

$(function(){
	$("#num1").type_number( { spin: "off" } );
	$("#num2").type_number( { spin: "on" } );
	$("#num3").type_number( { spin: "jquery" } );
});

</script>

<style type="text/css">
* {
	font-family: "メイリオ", Meiryo, "MS Pゴシック";
	font-size: 16px;
}

</style>
<form 
	method="get" 
	id="target_form" 
	target="my_ferame" 
	action="http://winofsql.jp/php_get.php" 
	accept-charset="utf-8">
<pre>
<input 
	id="send_check" 
	class="num"
	type="submit" 
	name="send" 
	value="送信">
▼ type="number" でスピンボタンなし
<input
	id="num1"
	class="num"
	type="number" 
	name="num[]">

▼ type="number" でスピンボタンあり
<input 
	id="num2"
	class="num" 
	type="number" 
	id="ie9" name="num[]">

▼ jQuery spinner
<input 
	id="num3"
	class="num" 
	type="number" 
	id="ie9" name="num[]">
</pre>
</form>
<iframe name="my_ferame" frameborder="1" scrolling="yes" width="400" height="200"></iframe>

以下の3種類の実行でそれぞれの表現が変化します。( spinner へのオプションが必要な場合は、追加で設定します。
$(function(){
	$("#num1").type_number( { spin: "off" } );
	$("#num2").type_number( { spin: "on" } );
	$("#num3").type_number( { spin: "jquery" } );
});



【プラグイン作成(jQuery)の最新記事】
posted by lightbox at 2014-11-21 11:33 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり