SQLの窓

2013年02月28日


IE のドメイン毎のクッキー削除


IE8もIE9 も開発者ツールの『キャッシュ』メニューより削除できます



ブラウザ全体の削除

CTRL + SHIFT + DEL で以下のダイアログを表示させて、クッキーのみをチェックして削除します。このチェック状態は保存されるので、次回の関連処理では再びチェックしなおす注意が必要です。



他のブラウザでのクッキーの削除

※ 個別の削除は結構皆面倒なので注意して下さい

■ Google Chrome
設定 => 詳細設定 => プライバシー => コンテンツの設定 => 全ての Cookieと サイトデータ => サイトを選択して右端の x をクリック

■ Firefox
オプション => プライバシー => Cookieを個別に削除 => サイトを選択して削除

■ Opera
設定 => 詳細設定 => Cookie => Cookie設定 => サイトを選択して削除

■ Safari
設定 => プライバシー => 詳細ボタン => サイト(クッキー)を確認して削除

関連する記事

IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
ブラウザ毎の「開発者ツール」の起動
IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
ブラウザ別『Java 無効』



posted by lightbox at 2013-02-28 10:00 | IE開発者ツール | このブログの読者になる | 更新情報をチェックする

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>



タグ:javascript jquery
posted by lightbox at 2013-02-26 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 ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり