176
167

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-12

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

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キーでサブミットされることを防ぐことが出来る用になる。

176
167
12

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
176
167

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?