Enterキー押下によるsubmitのキャンセル

カーソルがinputにある場合に、Enterキー押下によるsubmitをキャンセルしたいと思います。

以下のコードだと意図した通りに動くのですが、

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="content-type" content="text/html;charset=UTF-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
6<script type="text/javascript">
7$(function() {
8	$('input').keydown(function(e){
9		if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
10			//alert("bbb");
11			return false;
12		}
13	});
14});
15</script>
16</head>
17<body>
18<form method='post' action='index.php'>
19<input type='text' name='hoge' value='aaa'>
20<input type='submit'>
21</form>
22

10行目のコメントを解除した場合、Chromeではsubmitされてしまいます。
（IEだとsubmitされません。）

この挙動はどのような理由によるものでしょうか？
よろしくお願いいたします。

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

回答1件

ベストアンサー

alertはjavascriptの実行を止める効果があります。
IEの場合は、すべての実行を待ちますが、Chromeの場合は「お？FormのEnterの処理を待ってるな。待ってるならEnterを押してfalseが来ないし、submitにしよう」という感じの処理になります。

こうすると意図したとおりに動くと思いますよ。

js
1
2        if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
3            setTimeout(function(){ alert("bbb"); }, 0);
4            return false;
5        }
6