jQuery 忽略回车键直到文本区域中的最小长度，然后绑定提交

Question

我想模仿 Facebook 评论框的行为，使用 jQuery，其中字段在输入时提交 - 但直到输入最少字符数后才会提交。

我这里有这个版本：

    $(function() {
        $("textarea.commentfield").keypress(function (e) {

            // fire on enter key
            if ( (e.which == 13) && (this.value.length >= 3) ) {

当 Textarea 中有 3 个或更多字符时提交 - 但是如果用户在最少字符之前按回车键，它会插入一行 return.

如何防止这种行为 - 在达到最小长度之前基本上忽略回车键？

Answer 1

Event.preventDefault() 将不显示按下的键

$(function() {
  $("textarea").keypress(function(e) {
    if (e.which == 13) {
      if (this.value.length >= 3) {
        console.log('submitting');
      } else {
        e.preventDefault();
      }
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

Answer 2

作为 Juan 回答的替代方法，您可以 return false 从事件处理程序中防止其默认行为。

$(document).ready(function() {

  $("textarea.commentfield").keypress(function(e) {
    // fire on enter key
    if ((e.keyCode || e.which) == 13) {
      if (this.value.length >= 3) {
        $(this).parents('form').submit();
      } else {
        return false;
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" class="commentfield"></textarea>

请注意，return false 仅适用于 jQuery 处理程序，不适用于使用 addEventListener 的处理程序。参见 http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

jQuery 忽略回车键直到文本区域中的最小长度，然后绑定提交

jQuery ignore enter key until min length in textarea, then bind to submit

html

jquery

submit