Question

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

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

是否可以更改此代码，以便用户可以在textarea中键入超出限制的内容，然后当用户单击“提交”按钮时，如果超出限制，则会显示警报。

任何帮助表示感谢。

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

您实际上可以显示一条消息，显示剩下的字符，每当用户超出限制时，会显示提交警告框的点击。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

Javascript检查提交时的文本限制

5 个答案: