SQLの窓

2010年07月08日


JavaScript による入力制限( 0〜9 と BackSpace と左右矢印キーしか入力できないフィールド )

IE、Firefox、Google Chrome、Opera でテストしています。Firefox がかなり特殊で、evt.charCode と evt.keyCode の扱いが他と違います。Opeara は、IE と同じく returnValue  が使えるので IE 側でコントロールしています
<script type="text/javascript">

function numField(evt) {

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

	// ********************
	// IE、Opera
	// ********************
	if ( btype.indexOf("msie") > -1 || btype.indexOf("opera") > -1) {
		if ( 48 <= evt.keyCode && evt.keyCode <= 57 ) {
			return;
		}
		if ( evt.keyCode == 8 ) {
			return;
		}
		if ( btype.indexOf("opera") > -1 ) {
			if ( evt.keyCode == 37 || evt.keyCode == 39 ) {
				return;
			}
		}

		evt.returnValue = false;
	}
	else {
		if ( 48 <= evt.charCode && evt.charCode <= 57 ) {
			return;
		}
		if ( evt.charCode == 0 ) {
			if ( evt.keyCode == 8 ) {
				return;
			}
			if ( evt.keyCode == 37 || evt.keyCode == 39 ) {
				return;
			}
		}
		evt.preventDefault();
	}

}

function numKeyDown(evt) {

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

	// ********************
	// IE
	// ********************
	if ( btype.indexOf("msie") > -1	) {
		if ( evt.keyCode == 46 ) {
			evt.returnValue = false;
		}
	}
	// ********************
	// Chrome
	// ********************
	if ( btype.indexOf("chrome") > -1	) {
		if ( evt.keyCode == 46 ) {
			evt.preventDefault();
		}
	}

}

</script>

<INPUT type=text onkeypress="numField(event)" onkeydown="numKeyDown(event)">


evt.keyCode == 46 は、Delete キーです。IE と Chrome で使えるので、使えないようにするには、onkeydown が必要でした。別にさしつかえなければ、onkeydown を実装する必要はありませんが、onkeypress だけでは、押されたキーのコントロールはできない場合があると言う事です。


関連する記事

JavaScript による入力制限( attachEvent と addEventListener を使った場合 )



posted by at 15:53 | JavaScript | このブログの読者になる | 更新情報をチェックする


2009年07月16日


Firebug Lite に習うブックマークレットの作成

以下は、Firbug Lite 用のオリジナルブックマークレット用のコードです。

上は、アンカーに設定されている実際のコードで、下は読みやすく整形したものです。
<a href="javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);">Firebug Lite</a>

var firebug = document.createElement('script');
firebug.setAttribute('src', 'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');
document.body.appendChild(firebug); (function() {
    if (window.firebug.version) {
        firebug.init();
    } else {
        setTimeout(arguments.callee);
    }
})();
void(firebug);
それを応用して、Seesaa のランキングを埋め込むコードをテーブルで整理するようにするコードを配置する為のブックマークレットを作りました。上がブックマークレット用のコードで、リンクば実際にインストール
できます。下は WEB に置いた、実際の処理を行うコードです。

Seesaa の 記事テキストエリアに書かれた内容をテーブルタグで囲んで、そのコンテンツの右側と下に文章をかけるようにしています
Seesaa用ランキング自動配置ブックマークレット
var mylib = document.createElement('script');
if (!window.lightbox_001) {
    mylib.setAttribute('src', 'http://winofsql.jp/settable.js');
    document.body.appendChild(mylib); (function() {
        if (window.lightbox_001) {
            lightbox_001.init();
        } else {
            setTimeout(arguments.callee);
        }
    })();
} else {
    lightbox_001.init();
}
void(mylib);
if (!window.lightbox_001) {
(
function() {
	window.lightbox_001 = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		init : function( ) {
			var target = document.getElementById("article__body");
			var text = target.value;
			var str1,str2;
str1="";
str1+=" \n";
str1+=" \n";
str2+=" \n";
str2+="
\n"; str1+=" \n"; str1+="
\n"; str2=""; str2+="
\n"; str2+=" \n"; str2+="
\n"; str2+=" \n"; str2+="
 \n";
str2+="右側のコメント \n";
str2+="
\n"; str2+=" \n"; str2+="
\n"; str2+=" \n"; str2+=" \n"; str2+="
 \n";
str2+="下側のコメント \n";
str2+="
\n"; target.value = str1 + text + str2; target = document.getElementById("article__convert_breaks-0"); target.checked = true; } }; } )(); }


posted by at 14:02 | JavaScript | このブログの読者になる | 更新情報をチェックする


2009年07月14日


JavaScrip ライブラリの基本スケルトン

Firebug Lite がサンプルです。
実際そんなに気にする必要は無いですが、二重にロードされても
最初のものしか実行されません。
var _jslibname = "lightbox";
if (!window[_jslibname]) {
(
function() {
	window[_jslibname] = 
	{
		// プロパティ
		version: 1.01
		,
		// メソッド
		trim : function( str ) {
			var regL = /^[ \s]+/;
			var regR = /[ \s]+$/;
			var len = arguments.length;
			str = str.replace(regL,"");
			str = str.replace(regR,"");
			return str;
		}
	};
}
)(); // 定義された 無名 function の実行
} // if (!window[_jslibname]) { の終了

<script type="text/javascript" src="object.js"></script>

<input type="button" value="ok" onClick='alert("|"+lightbox.trim(" abc ")+"|");'>

実行は、_jslibname 内の文字列が、名前空間になるところがポイント
で、window オブジェクトに付加しているので新たにオブジェクトを
作成せずに、ライブラリ名(名前空間)をトップに持ってこれています


posted by at 21:28 | JavaScript | このブログの読者になる | 更新情報をチェックする


2009年05月24日


テキストエリアの右端で折り返さない

どうも、Firefox がスクリプトで変更すると言う事を聞かないので、
innerHTML で総替えです。
<script type="text/javascript">
function change_wraptype(obj) {

	var svdata;

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		if(obj.checked){
			document.getElementById("text_unit").wrap = "off";
		}
		else{
			document.getElementById("text_unit").wrap = "soft";
		}
	}
	else {
		svdata = document.getElementById("text_unit").value;

		if(obj.checked){
			str = str="<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"off\"></textarea>";
		}
		else{
			str = str="<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"soft\"></textarea>";
		}
		document.getElementById("control_unit").innerHTML = str;
		document.getElementById("text_unit").value = svdata;
	}
}
</script>

折り返さない <input
	type="checkbox"
	onClick='change_wraptype(this)'
>
<div id=control_unit>
<script type="text/javascript">
document.write("<textarea id=\"text_unit\" cols=80 rows=20 wrap=\"soft\"></textarea>");
</script>
</div>

折り返さない
posted by at 17:56 | JavaScript | このブログの読者になる | 更新情報をチェックする



JS : 10進数 <-> 16進数


<script type="text/javascript">

document.write( 0x123456 );
document.write( "<br>" );

document.write( parseInt("0x" + 123456) );
document.write( "<br>" );

document.write( eval("0x" + 123456) );
document.write( "<br>" );

document.write( parseInt( "123456", 16 ) );
document.write( "<br>" );

document.write( parseInt("#123456".replace(/#/,"0x")) );
document.write( "<br>" );

document.write( (0x123456).toString(16) );
document.write( "<br>" );

</script>


1193046
1193046
1193046
1193046
1193046
123456
posted by at 01:07 | JavaScript | このブログの読者になる | 更新情報をチェックする