ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
jQuery で入力制限( 入力値復帰型 )
日時: 2013/03/01 11:28
名前: lightbox



   
 

<input class="numField" type="text" />
<input class="numField" type="text" />
<input class="numField" type="text" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$.fn.extend({ 
	allowField: function(str){
		// 対象文字集合を登録しておく
		$(this).data( "allowstr", str );
		$(this).bind('keyup', function() {
			var allowstr = $(this).data( "allowstr" );
			var cur = $(this).data( "cur" );
			var change = $(this).val();
			var char = null;
			for( var i = 0; i < change.length; i++ ) {
				char = change.substr( i, 1 );
				if ( allowstr.indexOf(char) == -1 ) {
					$(this).val(cur);
					return;
				}
			}
			$(this).data( "focus", $(this).val() );

		}).bind('change', function() {
			// ここの処理は、フォーカスがなくなった時にその中に1文字でも対象外
			// の文字が含まれていたら、直前の保存の状態に戻すので、極端な場合は
			// 全く空白になる事があり得ますので注意が必要です
			var allowstr = $(this).data( "allowstr" );
			var focus = $(this).data( "focus" );
			var change = $(this).val();
			var char = null;
			for( var i = 0; i < change.length; i++ ) {
				char = change.substr( i, 1 );
				if ( allowstr.indexOf(char) == -1 ) {
					$(this).val(focus);
					return;
				}
			}
		}).bind('keydown', function() {
			// 現在のデータを保存
			$(this).data( "cur", $(this).val() );
		}).bind('focus', function() {
			// 現在のデータを保存
			$(this).data( "focus", $(this).val() );
		});
		return this;
	}  
});

// プラグインの実行
$(".numField").allowField("1234567890ABCDEFabcdef-")
 .css("background-color", "#e0e0ff")
 .css("width","70px")
 .attr("maxlength",6);

</script>
メンテナンス


日時: 2013/03/01 11:28
名前: lightbox