blog.nomadscafe.jp

エンターキーの押下でフォームの送信を行わないようにするJavaScript。
オライリーの「JavaScript & DHTML クックブック」に載ってたりするわけだが、

function BlockEnter(evt){
	evt = (evt) ? evt : event; 
	var charCode=(evt.charCode) ? evt.charCode : 
		((evt.which) ? evt.which : evt.keyCode);
	if ( Number(charCode) == 13 || Number(charCode) == 3) {
		return false;
	} else {
		return true;
	}
}

こういうコードを書いて、

<input type="text" name="search" onkeydown="return BlockEnter(event);">

というように紹介されている訳だが、いまいちSafariでうまく動かない。エンターキーを押した時点で送信されてしまう。
キーボードに関するイベントには、keyup、keydown、keypressの３つがあるので１つ１つ試したところ、onkeypressでIE、Firefox、Safari全てうまく動いた。

onkeydownをすべてのinput要素に追加して行くのは面倒なので以下のスクリプトを書き、

function attachBlockEnter(formid) {
	var elements = document.forms[formid].elements;
	for (var j=0; j < elements.length; j++) {
		var e = elements[j];	
		if (e.type == "text"){
			e.onkeypress=BlockEnter;
		}
	}
}

formを指定するだけで内部のテキスト入力要素全てに適用されるようにした。
使用例：

<form name="form1">
〜〜〜
<input type="text" name="search">
〜〜
</form>
<script>
attachBlockEnter('form1');
</script>

単純な検索フォームでは適用できないが、アンケート等多くの項目がある場合はいれておくとUIの改善になるのではないでしょうか。

ちなみに、これをprototype.jsで書き直すと、

var attachBlockEnter = Class.create();
attachBlockEnter.prototype = {
	initialize: function(fid) {
		this.fele=$(fid);
		Event.observe(this.fele,'keypress',this.BlockEnter.bindAsEventListener(this), false);
	},

	BlockEnter: function(event) {
    	if(event.keyCode == Event.KEY_RETURN){
    		Event.stop(event);
    		return;
    	}
	}
}

になると思うんだけど、Safariの場合、prototype.jsのEvent.observe functionでkeypressがkeydownに書き換えられてしまいうまく動かない。SafariのJavaScript実装のだめだめさを理解してきた今日この頃。Mac IEは言わずものがな。