LoginSignup
52

More than 3 years have passed since last update.

Enterでsubmitするtextarea

Last updated at Posted at 2012-12-26

追記 (2019-04-16)

MDNによると、keypressはdeprecatedで今後はkeydownを使ってくれとのこと。

あわせてkeyCodeもdeprecatedなので、keycodeを使ったほうが良い。


Facebookのコメント投稿欄とかLingrの発言欄とか、Enter一発でsubmitするtextareaの作り方。

一応次の機能も盛り込む。

  • Shift+Enterで改行も入力できるようにしておく。
  • 本文がスペース、改行だけならsubmitしない。

HTML:

<form action="/messages" method="POST" id="new-message">
  <textarea id="message-text" name="text"></textarea>
</form>

Javascript:

var $form = $("#new-message");
var $ta = $("#message-text");

$(document).on("keypress", "#message-text", function(e) {
  if (e.keyCode == 13) { // Enterが押された
    if (e.shiftKey) { // Shiftキーも押された
      $.noop();
    } else if ($ta.val().replace(/\s/g, "").length > 0) {
      e.preventDefault();
      $form.submit();
    }
  } else {
    $.noop();
  }
});

実際には連続でsubmitされないように、一度submitしてリクエストを投げたらそのレスポンスが返ってくるまでリクエストを送信しないような仕組みを入れる必要がある。

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
52