SQLの窓

2015年07月22日


jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )

プラグインとしては、一応 IE8、IE9、Chrome、Firefox、Opera、Safari で動作はしていますが、入力制限でうまく行かない場合があると洒落にならないので、実用としては考えていないコードです。

ただ、プラグインの考え方としては良く解りやすいと思います。対象となる入力フィールドに対して一括で jQuery で入力制限を行った上に、CSS で色とサイズと最大入力数も同時設定しています。

try 〜 catch が入って変な事になっているのは、IE8 に対応する為です。returnValue = false では、特にエラーになる事は無かったのですが(実際ではIEのみ実行にしたほうがよさそうです)、一応念のため。preventDefault は、IE8 以前ではエラーになるはずです。
<!-- 古いIE用に 1.9.1 を使用しています -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="numField" type="text">
<input class="numField" type="text">
<input class="numField" type="text">
<script>

// プラグインの作成( fn.extend )
$.fn.extend({ 
	numField: function(){
		$(this).on('keydown', function(evt) {
			// *********************************
			// 以下入力を受け付けるキーの処理
			// *********************************
			// 数字( 0〜9 )
			if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
				return;
			}
			// テンキー( 0〜9 )
			if ( 96 <= evt.keyCode && evt.keyCode <= 105 ) {
				return;
			}
			// 矢印
			if ( 37 <= evt.keyCode && evt.keyCode <= 40 ) {
				return;
			}
			// DEL
			if ( evt.keyCode == 46 ) {
				return;
			}
			// タブ
			if ( evt.keyCode == 9 ) {
				return;
			}
			// バックスペース
			if ( evt.keyCode == 8 ) {
				return;
			}
			// *********************************
			// 以下入力を受け付けないキーの処理
			// *********************************
			// 古い IE 用
			if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
				try{
					evt.returnValue = false;
				}catch(ex){}
			}
			try{
				// イベントがキャンセル可能である場合、
				// 上位ノードへのイベントの 伝播 (propagation) を止めずに、
				// そのイベントをキャンセルします。
				evt.preventDefault();
			}catch(ex){}
		});
		// プラグインの標準仕様として実行後は自分自身を返す
		return this;
	}  
});

// プラグインの実行
$(".numField").numField()
	.css({
		"background-color":"pink",
		"width":"70px"
	})
	.attr("maxlength",6);

</script>



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

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

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