1. Qiita
  2. 投稿
  3. jQuery

テキストフィールドがEnterキーでサブミットされるのを防ぐ

  • 132
    いいね
  • 11
    コメント
この記事は最終更新日から1年以上が経過しています。

※コメントの指摘を修正済みです。

HTMLではForm内にテキスト一行入力系のフィールドが一つだった場合、そこでEnterキーを押すとSubmitされる仕様になっている。

詳しい仕様に関しては以下を参照:

具体的には、inputのtypeが
text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number
のどれかだと、この挙動になる。

これが厄介なのは、Form内にチェックボックスやテキストエリアなどの他のフィールドがあってもテキストフィールドが一つだったらサブミットしてしまう事。意外とそういう風になっていることに気づかないのでデフォルトでオフにしておくことをオススメする。
逆に、検索Boxなどsubmitして欲しい場合もあるので、allow_submitというクラスを明示的につけるとデフォルトの挙動に戻るように設計する。

デフォルトでこの挙動を解除する方法

常にロードされるJavascriptファイルないで以下のように記述する。

$(function() {
  $(document).on("keypress", "input:not(.allow_submit)", function(event) {
    return event.which !== 13;
  });
});

自分のためにCoffeeScriptバージョンも書いておく。

$ ->
  $(document).on "keypress", "input:not(.allow_submit)", (event) -> event.which != 13

こうすることで、allow_submitを明示的にクラス名に付けない限り、Enterキーでサブミットされることを防ぐことが出来る用になる。