Enterによるsubmitの無効化

Enterキーを押すとformが送信されてしまうことがありますよね。
入力中にマウスを使わずにキーボードのみで送信できるので楽ですね。
ただ、入力中に意図せずEnterを押したときなどは逆に「あーーー」って感じになりますね。

半角英数の入力項目を持ったformを編集中にうっかりEnterを押すと送信されちゃうと指摘を受けたので修正しました。



google先生に聞くとinputタイプを「submit」から「button」に変える対応がのってました。

送信ボタンのタイプを変更

<form name="form1" action="index.html">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="submit" value="送信" />
</form>

↓

<form name="form1" action="index.html">
    <input type="text" name="text1" />
    <input type="text" name="text2" />
    <input type="button" onclick="submit();" value="送信" />
</form>

実装してみると確かに送信されません。対応完了と思ったら、これだとASP.NET MVCの検証機能が働かないんですね。まーsubmitじゃないですからね。
なのでjava scriptで対応することにしました。

java scriptで対応

送信ボタン（input要素）にてキーダウン時にキーがEnterだったらキャンセルです。
※13はEnterキーのキーコードです

$(function(){
        $("input"). keydown(function(e) {
            if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
                return false;
            } else {
                return true;
            }
        });
});

ただし、当たり前ですが送信ボタンにフォーカスしてEnterで送信したくても無理ですwww