Enterでsubmitするtextarea

追記 (2019-04-16)

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

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

---

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してリクエストを投げたらそのレスポンスが返ってくるまでリクエストを送信しないような仕組みを入れる必要がある。