formをエンターで飛ばさない方法

formを入力途中のエンターを押した時にsubmitさせない方法としてsubmit falsを書き込むのが有名ですが、
<input type="img" onClic="submit();" ......>
で画像をサブミットボタンにしているとどうやってもエンターでsubmitしてしまいます。

サブミットボタンにimgを使用したままエンターでsubmitさせない方法を何かご存知の方いらっしゃらないでしょうか。

よろしくお願いします。

行動規範の内容に同意します

回答5件

javascript でEnterキーを無効化してはどうでしょうか

javascript
1<script>
2    $(function(){
3        $("input").on("keydown", function(e) {
4            if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
5                return false;
6            } else {
7                return true;
8            }
9        });
10    });
11</script>

投稿2015/10/28 23:52

trick

総合スコア366

退会済みユーザー

2015/10/29 01:21

`$(function(){`の書き方はjQuery適用済が前提なので、純javascriptな書き方も示すとよろしいかと存じます。

行動規範の内容に同意します

HTML/JavaScript(れがしー）
1
2訂正↓

1.jpg は適当なイメージを。
jQuery にしたい場合はご自由に。
type="image" でも普通に改行入力をキャンセルできましたけど。

---------------------- 訂正 ----------------------


<html>
<head>
	<meta charset="utf-8" />
	<title>submit demo </title>
<script>
window.onload = function() {

	var inputs = document.getElementsByTagName("input");
	
	inputs[0].addEventListener("keydown", function(e) {
		if (e.keyCode == 13 || e.keyCode == 10) {
			e.preventDefault();
			e.returnValue = false;
			return false;
		}
	}, false);

	inputs[1].addEventListener("keydown", function(e) {
		if (e.keyCode == 13 || e.keyCode == 10) {
			e.preventDefault();
			e.returnValue = false;
			return false;
		}
	}, false);

	inputs[2].addEventListener("keydown", function(e) {
		if (e.keyCode == 13 || e.keyCode == 10) { // 改行コード
			e.preventDefault();
			e.returnValue = false;
			return false;
		}
	}, false);

	inputs[2].addEventListener("keydown", function(e) {
		if (e.keyCode == 0x20) { // スペースキー
			e.target.form.submit();
		}
	}, false);
	
	inputs[2].addEventListener("click", function(e) {
		if (e.keyCode == 13 || e.keyCode == 10) {
			e.preventDefault();
			e.returnValue = false;
			return false;
		} else {
			e.target.form.submit();
		}
	}, false);
	
	
}
function formSubmit() {
	alert("image button enter");
	return false;
}
</script>
</head>
<body>
<form method="get">
	A<input type="text" name="A" />
	B<input type="text" name="B" />
	<input type="image" src="1.jpg" />
</form>
</body>
</html>

投稿2015/11/05 15:05

編集2015/11/05 15:14

ipadcaron

総合スコア1693

ipadcaron

2015/11/05 15:06

これだと、画像ボタンにフォーカスあるとき、"q" とか入力してもいけちゃいますね。適当に直してください。

ipadcaron

2015/11/05 15:18

image ボタンにフォーカスがないときに、テキストBOXの改行入力で image ボタンの onclick が動作することへの対処。 image ボタンにフォーカスがあるときに、改行コード・その他キーコードのうち、スペースキーだけマウスクリックと同様の動作として許可する必要があることへの対処。てな感じで、同じタグにイベントが３つも定義してあります（重複２つ）。

行動規範の内容に同意します

<form>の直下(必ず一番最初でなければなりません)に下記のダミー送信ボタンを追加するのはどうでしょうか？

HTML
1<input onclick="return false;" style="position: absolute; visibility: hidden;" type="submit">

HTML5では、form内でEnterキーが押された場合、一番最初の有効な送信ボタン(type="submit"だけではなくtype="image"等も含む)がクリックされるという仕様になっているようです。なので、最初にダミー送信ボタンを作って、onclick="return false;"により送信はしないとすることで、Enterキーによりダミー送信ボタンが押される動作が行われても、実際は送信しないということができます。

ただこの方法、Google Chrome、Safari、Mozilla Firefox(いずれも最新バージョンで確認)ではうまくいくのですが、Microsoft EdgeとInternet Explorerではvisibility: hidden;があるとダミー送信ボタンが無効扱いになってうまくいきません。Windowsユーザもサポートしたいなら、

HTML
1<input onclick="return false;" style="position: absolute; top: 0; left: 0; height: 0; width: 0; background: none; border: 0; padding: 0" type="submit" />

としてみてください。Microsoft EdgeとInternet Explorer 9/10/11(9と10は11の互換モードで確認)でも動作するようになります。

上記はHTML5で確認しています。また、Internet Explorer 8以下は対応していませんので、あしからずご了承ください。

投稿2015/11/03 02:50

編集2015/11/03 02:55

raccy

総合スコア21735

Javascript
1document./*@if( 1 ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'submit', function( evt ) {
2  var t = evt./*@if( 1 ) srcElement @eles@*/ target /*@end@*/;
3  
4  if ( !( t.tagName == 'INPUT' && t.type == 'img' ) ) {
5    evt./*@if( 1 ) returnValue = false @else@*/ preventDefault(); /*@end@*/
6  }
7}, false );

久しぶりなので、間違ってるかもしれません。

投稿2015/10/31 14:33

yuux01

総合スコア34

think49

2015/11/03 03:02 編集

条件付きコンパイルとは懐かしいですね。 - 質問文のHTMLは誤りで <input type="image"> が正式です。 - submit イベントの event.target は form 要素ノードなので input[type=image] は evnt.target になりません。 - attachEvent における submit イベントはバブリングしません。 - この実装では [Enter] キーを押さなくても submit されるだけで event.preventDefault() されます。 - この実装では addEventListener, attachEvent の両方を持つ実装で attachEvent が優先されます。 (何か名前が懐かしい気がしますが、教えてgoo(OKWave)にいらっしゃった方でしょうか)

yuux01

2015/11/04 14:40

ありがとうございます。やっぱりいろいろ間違ってたみたいですね。 OKWave ですが、私は見ていただけです。 thinkさんの回答は、すごく高度で、詳しいので感心しておりました。

think49

2015/11/05 13:20

別の方でしたか。失礼しました。

行動規範の内容に同意します

質問の回答に沿っていないかもしれないですが、
画像をAタグのリンクに替えるのが一般的かと思います。
↓言質
http://oshiete.goo.ne.jp/qa/5124022.html

投稿2015/10/31 14:23