如何用JavaScript实现textarea达150字上限时禁止输入且不禁用控件支持撤销

实现方案 #

• 不要直接禁用textarea，改为监听input事件，动态判断输入内容长度，超过上限时直接截断多余内容，既能阻止超字数输入，又不影响用户撤销、删除、回退等操作
• 字数计数要基于textarea实际输入的内容长度计算，不要依赖递增变量，避免粘贴内容、撤销操作时计数不准的问题

原有实现的问题：依赖计数变量递增判断长度，遇到粘贴、撤销、删除等操作时计数会不准；直接禁用控件后用户无法进行任何编辑操作，包括删除多余内容、撤销上一步输入。

可直接使用的代码示例

const textarea = document.getElementById('pro_desc');
const countEl = document.getElementById('maximum_length');
const MAX_LENGTH = 150;

textarea.addEventListener('input', function() {
  const currentVal = this.value;
  // 超过最大长度时截断到150字
  if (currentVal.length > MAX_LENGTH) {
    this.value = currentVal.slice(0, MAX_LENGTH);
  }
  // 实时更新字数计数
  countEl.innerText = this.value.length;
});

方案优势

• 全程不禁用textarea控件，用户可以正常执行撤销、删除、选中文本替换等所有常规编辑操作
• 计数基于textarea实际内容长度计算，就算用户粘贴大段内容、批量删除也不会出现计数偏差
• 输入超出上限时自动截断多余内容，完全不会出现超字数的情况

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