【jQuery】エンターキーでサブミットを無効化する方法！

【jQuery】エンターキーでのサブミットを無効化する方法！

Web技術

2021.06.08

フォームでEnterキーを押したときに送信されないようにしたい。

どうやって実現するの？

簡単に実装する方法を教えて欲しい！

こういった疑問にこたえます。

この記事を読めば

フォームでEnterキーを押されたときにsubmitされないようにする方法がわかる

フォームのテキストボックスなどを入力してEnterキーを押すとフォームの内容がサブミットされてしまいます。

便利な時もあれば、間違えて送信してしまう可能性もあります。

今回は、フォームでEnterキーを押された時にsubmitされないようにする方法をわかりやすく解説します。

Enterキーでサブミットを無効化する方法

例えば、次のようなフォームがあったとします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="post" action="post.php">
        <div>
            姓：<input id="lastname" type="text" name="lastname">
        </div>
        <div>
            名：<input id="firstname" type="text" name="firstname">
        </div>
        <input type="submit" value="送信">        
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

このようなフォームがあったときに、姓名のテキストボックスでEnterキーを押すと送信されてしまいます。

送信ボタンをクリックした時にsubmitされるようにするには、次のように記述します。

//script.js
$(function(){
    $('input').keypress(function(e){
        if(e.which == 13) {
            return false;
        }
    });
});

13というのはEnterキーのキーコードでEnterキーが押された場合にfalseを返すようにし、無効にします。

キーコードはこちらのWebページ作成リファレンスでまとめられているので参考にしてください。

以上、お疲れ様でした。