SQLの窓

2013年02月27日


jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )

実用的と言っても以下の二つに比べての話で、見た目はいったん入力したものがフォーカス移動時に元にもどったり、キーで入力したものがいったん表示されて消えるといった見た目はあまり良いものではありません。

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

しかし、JavaScript ではここらへんが限界のような気もします。いずれにしても、『処理』として参考にするようなコードである事は間違い無いと思います。

要点

ここで最も重要なのは、『いつ入力前のデータを保存するか』です。ここでは、onfocus と、onkeydown と、onkeyup の3か所で保存しています。但し、それぞれ意味が違います。

❶ onfocus では、最初からフィールドに入っていたものを取得するのが目的で、フォーカスが移動すれば、再度フォーカスを得る直前にまた保存されます。

❷ onkeydown では、何かキーを押す直前の保存なので、一文字づつのチェックの為に使います。しかし、クリップボートから転送される場合には、ここは意味が無いので onfocus で取得済の文字列を使います

❸ onkeyup では、実際の入力文字が該当しない場合に拒否して、❷ で保存したものに戻しますが、うまく行った場合は、保存します。こうする事で、フォーカス移動の無い状態で入力の途中でクリップボードの貼り付けが使用された場合に、戻す文字列量を最小限にします。

データの保存

保存データは、.data を使って、jQuery 内部に保存します。attr を使うと、INPUT 要素に保存できるので、開発者ツールでデバッグがしやすくなるメリットはありますが、.data を使うと、オブジェクトとして保存できるので、拡張が容易になります。
<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>



タグ:jquery javascript
posted by lightbox at 2013-02-27 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2013年02月26日


jQuery で、指定文字集合のみ入力可能なプラグイン

プラグインのサンプルとして、keydown イベントのみを使って作成した以下のプラグインと基本的に行っている事は変わりません。

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

▲ と同様実用になるものではありませんが、簡易的な入力制限であれば今回の方法は効果的です。

keydown イベント

このイベントの主体はキーボードに並んでいるキーなので、ほぼ全てのキーが網羅されています。しかし、テンキーと本体での数字キーは別の個体なので、違ったキーが割リ当てられます。また、キー操作を伴うキーを判別できるので、厳密なコントロールができる反面、制御するコード量が多くなるわりに、日本語等を完全にコントロールできないのでメリットがあまりないかもしれません。

keypress イベント

このイベントの主体は、アプリケーションに送られる文字コードが主体です。この場合テンキーから送られる『1』と本体から送られる『1』は同じ『1』を表す数値なので、管理が容易です。しかし、日本語を入力する為に『漢字』キーを少しでもコントロールしようとすると、keydown イベントが必要になるので付加しています。

ですが、結局完全にコントロールはできずに、現実にはブラウザによって挙動が違います。

this について

allowField 内の this は、jQuery のオブジェクトですが、イベント内の this は DOM なので、常に jQuery の処理として見通しを良くする為に、いずれにも $(this) という表現を行っています。

入力可能文字について

この文字集合は、入力フィールド毎に設定されるものなので、attr で要素の属性としてプラグイン作成時に設定し、イベント発生時には DOM より jQuery オブジェクトを作成して attr で取得して対象文字かどうかを判断するようにしています。
<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).attr("allowstr",str);
		$(this).bind('keypress', function(evt) {
			// なんらかの文字が割り当てられたキーを押した
			if ( evt.charCode != 0 ) {
				// 保存しておいた、対象文字集合を取り出す
				var allowstr = $(this).attr("allowstr");
				// 押された文字コードから実際の文字を作成する
				var nowstr = String.fromCharCode( evt.charCode );
				// その文字が対象文字集合に含まれていたら、関数を抜ける
				if ( allowstr.indexOf(nowstr) >= 0 ) {
					return;
				}
			
				// 対象文字集合に含まれない場合は、デフォルトの処理をキャンセル
				if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
					try{evt.returnValue = false;}catch(ex){}
				}
				try{evt.preventDefault();}catch(ex){}
			}
		}).bind('keydown', function(evt) {
			// 漢字
			// IE9 と Chrome と Safari は拒否できるが、Chrome は漢字モードにはなってしまうので
			// 漢字モードを抜けないと何も入力できなくなる
			if ( evt.keyCode == 229 ) {
				if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
					try{evt.returnValue = false;}catch(ex){}
				}
				try{evt.preventDefault();}catch(ex){}
			}
		});
		return this;
	}  
});

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

</script>



タグ:jquery javascript
posted by lightbox at 2013-02-26 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする

2013年02月24日


jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )

厳密には、prototype の意味が重要になるんですが、それを知っていてもあまり実用とは関係無いので事実だけを考えます。
jQuery.extend = jQuery.fn.extend = function() {
実際にはこのようなコードなので、処理そのものは同じですが、存在する場所が違うので jQuery からの処理を同じようにする事はできません。 fn.extend は、$(セレクタ) のメソッドとなる いわゆる、$(セレクタ) で作成されるオブシェクトは『インスタンス』で、常に prototype を継承して実体が作成されると考えるとしっくり来ます。しかし、extend メソッドでは $.メソッドとして実行できるようになります。よって、同様の処理を行う為には以下のコードのように全く違った実装をする必要があります。
<div id="box1"></div>
<div id="box2"></div>

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

$.extend({ test1:function(a){ this(a).text("test1"); return this(a);}  })

$.fn.extend({ test2:function(){ this.text("test2"); return this;}  })

var x = $("#box1");

x.test2().css("background-color","#c0c0ff");
$.test1("#box2").css("background-color","#c0c0c0");

console.dir(x)

</script>

extend メソッドの仕様

使い方としては、3種類あります。一つは extend(object1,object2) という形で、object1 に object2 をマージするのですが、同じ名前を持つものは置き換えられてしまいます。また、object1 を省略した形は元のオブジェクトに object2 をマージするようです。( これを fn.extend で行うのが一般的なプラグイン作成 )

二つ目の使い方は、extend(true,object1,object2) という使い方で、単純な置き換えをせずにデータが処理されます。具体的には、jQuery のドキュメントを読むか、実際に試すといいと思います。

三つ目は、object = $.extend({}, object1, object2) というような形で、object1 を置き換えずに object に object1 に対して object2 をマージしたオブジェクトを作成する事ができます。



タグ:jquery javascript
posted by lightbox at 2013-02-24 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



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

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