Javascript检查提交时的文本限制

Posted 2023-04-18

【中文标题】Javascript检查提交时的文本限制

【英文标题】：Javascript check text limit on submit

【发布时间】：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;
        
    );

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

任何帮助表示赞赏。

【参考方案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>