<input type="text">ではEnterを押すと勝手にsubmitされてしまうことがある。 これが便利なこともあるが、意図せずにsubmitしてしまう可能性があるため、Enterでのsubmitを防ぎたいときもある。


Enterを押すとsubmitされる条件

Enterを押すとsubmitされるのは以下の3パターンがある。

1. Opera、Safariで、<input type="text">または<input type="password">がある場合

<form>
	<input type = "text" name = "text1">
	<input type = "text" name = "text2">
</form>

2. IE、Firefoxで、<input type="text">または<input type="password">が1つ以上と、<input type="submit">または<input type="image">が1つ以上ある場合

<form>
	<input type = "text" name = "text">
	<input type = "submit" name = "button1" value = "送信">
</form>

3. IE、Firefoxで、<input type="text">または<input type="password">が1つだけあり、<input type="submit">も<input type="image">もない場合

<form>
	<input type = "text" name = "text">
</form>
対策1

Enterを押してもsubmitされないようにするには、以下のようにJavaScriptで押されたキーをチェックしてEnterだった場合に送信をキャンセルする。

function submitStop(e){
	if (!e) var e = window.event;

	if(e.keyCode == 13)
		return false;
}
<form>
	<input type = "text" name = "text" onKeyPress="return submitStop(event);">
	<input type = "submit" name = "button1" value = "送信">
</form>

<input type="text">や<input type="password">が複数ある場合は、Enterを押したときにsubmitしてほしくないものにそれぞれonKeyPress="return submitStop(event);"を追加する。

ページ内全ての<input type="text">と<input type="password">に追加するのなら以下のようにできる。

window.onload = function (){
		var list = document.getElementsByTagName("input");
		for(var i=0; i<list.length; i++){
		if(list[i].type == 'text' || list[i].type == 'password'){
			list[i].onkeypress = function (event){
				return submitStop(event);
			};
		}
	}
}
対策2

上記の対策では、通常Enterを押せばsubmitできるということを知っているユーザにとっては不便だと感じることがあるかもしれない。 そこで、JavaScriptを使ってsubmitしていいか確認することにする。

function submitCheck(e){
	if (!e) var e = window.event;

	if(e.keyCode == 13){
		if(confirm('送信してもよろしいですか?')){
			input = e.srcElement? e.srcElement: e.target;
			var form = input.parentNode;
			while(form != null && form.nodeName != 'FORM'){
				form = form.parentNode;
			}
			if(form != null)
				form.submit();
		}
		else {
			return false;
		}
	}
}

confirmでtrueが返された場合にformを見つけてsubmitしているところは、"return true;"だけでもたいてい問題はないが、IE、Firefoxで<input type="submit">も<input type="image">もなく、<input type="text">または<input type="password">が合計2つ以上ある場合に送信されないことに注意。

そして、対策1と同様、<input type="text">や<input type="password">にonKeyPress="return submitCheck(event);"を追加する。

<form>
	<input type = "text" name = "text" onKeyPress="return submitCheck(event);">
	<input type = "submit" name = "button1" value = "送信">
</form>

ページ内全ての<input type="text">と<input type="password">に追加するのなら以下のようにできる。

window.onload = function (){
		var list = document.getElementsByTagName("input");
		for(var i=0; i<list.length; i++){
		if(list[i].type == 'text' || list[i].type == 'password'){
			list[i].onkeypress = function (event){
				return submitCheck(event);
			};
		}
	}
}