HTML textarea超1000字符时弹窗提示失效，求排查问题

嘿，我来帮你排查问题出在哪～

首先，你的代码不生效的核心原因是HTML里的maxlength="1000"属性限制了输入：这个原生属性会直接阻止用户输入超过1000个字符，所以文本框内容的长度永远到不了1001，你的JS判断条件$(this).val().length >=1001自然永远不会触发。

另外，你的textarea标签里重复写了两次maxlength="1000"，虽然浏览器会自动忽略重复属性，但最好只保留一个，避免代码冗余。

下面给你两种可行的解决方案：

方案一：用JS完全控制输入限制（移除原生maxlength） #

这种方式能让你更灵活地处理提示逻辑，同时避免原生限制导致的判断失效：

先修改HTML，移除maxlength属性：

<div class="form-group">
  <label for="">Werk-Beschreibung</label>
  <textarea id="limit" name="werk_beschreibung" cols="30" rows="10" class="form-control"><?php echo escape($werk_beschreibung); ?></textarea>
  <span class="counter"></span>
</div>

然后调整JS代码，既做提示也做截断（防止用户输入超过限制），同时更新计数器：

$("#limit").on('input', function() {
  const maxLimit = 1000;
  const currentLength = $(this).val().length;
  
  // 更新计数器显示
  $('.counter').text(`${currentLength}/${maxLimit}`);
  
  if (currentLength > maxLimit) {
    // 截断超过限制的内容
    $(this).val($(this).val().slice(0, maxLimit));
    alert('你已达到1000字符的输入上限！');
  }
});

方案二：保留原生maxlength，调整提示逻辑 #

如果你想保留原生的输入限制（用户无法输入超过1000字符），可以调整JS的判断条件，当内容长度等于1000时提示，同时避免重复弹窗：

let hasShownAlert = false;
$("#limit").on('input', function() {
  const currentLength = $(this).val().length;
  
  // 更新计数器
  $('.counter').text(`${currentLength}/1000`);
  
  if (currentLength === 1000 && !hasShownAlert) {
    alert('你已达到1000字符的输入上限！');
    hasShownAlert = true;
  } else if (currentLength < 1000) {
    // 用户删除字符后，重置弹窗状态
    hasShownAlert = false;
  }
});

最后别忘了确认：你的页面已经正确引入jQuery库了吗？如果没有，得先在页面里引入jQuery（比如在</body>标签前添加<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>），否则你的JS代码会因为找不到$而失效哦～

内容的提问来源于stack exchange，提问作者user8625234