Javascript检查提交时的文本限制答案

【问题标题】：Javascript check text limit on submitJavascript检查提交时的文本限制
【发布时间】：2016-04-06 12:43:47
【问题描述】：

我有这个 JQuery 代码将文本区域中的文本限制为 250 个字符：

    $('#postform textarea').keypress(function() {
         if($(this).val().length >= 250) {
            $(this).val($(this).val().slice(0, 250));
            return false;
        }
    });

是否可以更改此代码，以便用户可以在文本区域中输入超过限制，然后当用户单击提交按钮时，如果超过限制，它会显示警报。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery character-limit

【解决方案1】：

在您的表单上使用sumbit 事件而不是keypress 事件：

$('#form').submit(function(event) {
    var $textarea = $(this).find('textarea')
    if($textarea.val().length >= 250) {
        // do what you want
        // show an error or
        // E.g : highlight the textarea in red
        $textarea.addClass('input-error');
        return false;
    }
    else {
        $textarea.removeClass('input-error');
    }
});

.input-error {
  border-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" method="form">
  <textarea></textarea>
  <button type="submit">Submit</button>
  </form>

【讨论】：

删除event.preventDefault(); 否则form 将永远不会被提交
否，否则表单将被提交。我把它放在错误的情况下。谢谢
但return false;（在 jQuery 处理程序中）是 event.stopPropagation(); 和 event.preventDefault(); 的别名。所以使用一个或另一个，但这里你的代码是多余的
哦，我不知道。谢谢

【解决方案2】：

尝试使用maxlength属性。

<textarea rows="4" cols="50" maxlength="10" placeholder='You can type just 10 characters'>
</textarea>

注意： Internet Explorer 9 及更早版本或 Opera 12 及更早版本不支持 textarea 标签的 maxlength 属性。

希望这会有所帮助。

【讨论】：

【解决方案3】：

是的，你可以。您只需要检查 textarea 的提交，看看它没有超过限制。

$('#my-form').submit(function() {
    if($('input[name="myTextArea"]').length >= 250) {
     alert("Hey your text is over 250");
    }
})

【讨论】：

【解决方案4】：

$('#postform').submit(function() {
     if($('#postform textarea').val().length >= 250) {
        //message
        return false;
     }
     return true;
});

【讨论】：

虽然这段代码可以回答这个问题，但最好解释一下它的作用并添加一些参考。

【解决方案5】：

您实际上可以有一条显示剩余字符的消息，并且每当用户超过限制并单击提交时，就会显示一个警告框。

$('#postform textarea').keypress(function() {
         var c_left = lettersTyped($(this));
         if((c_left-20) < 0){
           $('p').html(20-c_left+' characters left').removeClass('error');
         }
         else{
           $('p').html('Limit exceeded!').addClass('error');
           }
    });
    function lettersTyped(text){
      var len = text.val().length;        
      return len;
    }

       $('#postform .submit').on('click', function(){
         var text = $('#postform textarea');
         if(lettersTyped(text) > 20){
          alert('You have exceeded the limit');
         }
         else{
          //not submitting the form here, but you can keep it true. 
          return false;
         }
       });

p{
color: lightgreen;
}
.error{
color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form id="postform">
 <textarea placeholder="Start typing.."></textarea>
 <p></p>
 <input type="submit" class="submit"/>
</form>

【讨论】：