时间戳

首页 > 解决方案 > 如何验证文本区域并在编写时抛出错误？

javascript - 如何验证文本区域并在编写时抛出错误？

问题描述

我有一个文本区域，我希望它达到最大长度以显示错误（不是在按下提交之后）代码：

HTML

  <textarea maxlength="5000" id="summernote"  rows="4" cols="30"></textarea>
  <p id="message"></p>

JS

 $(document).ready(function () {
    var area = document.getElementById("summernote");
    var message = document.getElementById("message");
    var maxLength = 5000;
    var checkLength =()=> {
        if (area.value.length < maxLength) {
            message.innerHTML = "5000 karaktere";
        }
        }
        setInterval(checkLength, 300);
    })

标签： javascripthtmljquery

解决方案

不要使用 a setInterval，而是使用input事件。此外，您当前正在检查输入字符串的长度是否小于 maxlength，而您应该检查它是否相等。

document.querySelector("#summernote").addEventListener("input", function(e){
  if(this.value.length == this.maxLength){
    document.querySelector("#message").textContent = `Max length of ${this.maxLength} characters reached.`;
  }
});
<textarea maxlength="10" id="summernote"  rows="4" cols="30"></textarea>
<p id="message"></p>

推荐阅读