[ jQuery ] エンターキーでのサブミットを無効化 ( .keypress )

Tweet

Pocket

フォーム内に、テキストボックスが一つだけ設定されている場合には、テキストボックス内でのエンターキー入力でサブミットしてしまいます。便利なときもありますが、その反面使い易さなどの観点からエンターキー入力でのサブミットを禁止したい場合もあると思います。ここでは、jQuery を使ってエンターキー入力でのサブミットを無効化するサンプルを掲載しています。

HTML サンプル

このページで扱うサンプルでは、以下の HTML を使用するものとします。

<form name="form_test" method="post" action="test.php">

  <input type="text" name="input_test" />
  <input type="submit" name="submit_test" value="サブミット" />

</form>

jQuery でエンターキーの入力を無効化するサンプル

    /*
     * テキストボックス内でエンターキーでサブミットしないようにする
     */
    $("input[name = input_test]").keypress(function (e) {
        if (e.which === 13) {
            return false;
        }
    });

    /*
     * エンターキーでボタンのサブミットしないようにする
     */
    $("input[name = submit_test]").keypress(function (e) {
        if (e.which === 13) {
            return false;
        }
    });

さらに、フォーム内でまるっとエンターキーを無効化するには以下のようにすることもできます。

    $("form[name = form_test]").keypress(function (e) {
        if (e.which === 13) {
            return false;
        }
    });

しかし、こちらの方法は、フォーム内にテキストエリアなどがある場合には、テキストエリアでも改行できなくなります。その場合には利用できませんので、個別に入力を無効とする必要があります。なお、上記のコードは下記に示す on メソッドを使ったコードと同じものです。

    $("form[name = form_test]").on("keypress", function (e) {
        if (e.which === 13) {
            return false;
        }
    });

参考

• .keypress()

Tweet

Pocket