javascript - Javascript检查提交时的文本限制

Question

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

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

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

任何帮助表示赞赏。

Answer 1

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

$('#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>

Answer 2

尝试使用maxlength属性。

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

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

希望这可以帮助。

Answer 3

是的你可以。您只需要检查 textarea 的提交并查看它是否超出限制。

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

Answer 4

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

$('#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>

Answer 5

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