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 | このブログの読者になる | 更新情報をチェックする