如何动态设置<textarea>元素仅允许编辑最后10个字符？

以下是实现该需求的JavaScript方案，通过监听输入和按键事件，强制锁定文本框的前半部分内容，只允许编辑最后10个字符：

完整代码 #

HTML（沿用你提供的结构） #

<div id="container">
  <textarea id="inputText" name="inputText" wrap="soft"></textarea>
</div>

JavaScript #

const textarea = document.getElementById('inputText');
let previousValidContent = '';

// 聚焦时初始化有效内容记录
textarea.addEventListener('focus', () => {
  previousValidContent = textarea.value;
});

// 处理输入事件，维护内容的有效性
textarea.addEventListener('input', () => {
  let currentValue = textarea.value;
  const totalLength = currentValue.length;

  if (totalLength > 10) {
    const fixedLength = totalLength - 10;
    // 拆分固定部分和可编辑部分
    const fixedPart = currentValue.slice(0, fixedLength);
    const editablePart = currentValue.slice(fixedLength);

    // 若固定部分被篡改，恢复为之前的有效固定内容
    if (fixedPart !== previousValidContent.slice(0, fixedLength)) {
      textarea.value = previousValidContent.slice(0, fixedLength) + editablePart;
      currentValue = textarea.value;
    }

    // 更新有效内容记录
    previousValidContent = currentValue;

    // 强制光标停在可编辑区域末尾
    textarea.setSelectionRange(currentValue.length, currentValue.length);
  } else {
    // 内容不足10字符时，全部可编辑，更新记录
    previousValidContent = currentValue;
  }
});

// 拦截可能修改固定部分的按键操作
textarea.addEventListener('keydown', (e) => {
  const currentValue = textarea.value;
  if (currentValue.length <= 10) return;

  const editableStart = currentValue.length - 10;
  const cursorStart = textarea.selectionStart;

  // 光标在不可编辑区域时，阻止修改类按键（允许方向键移动）
  if (cursorStart < editableStart) {
    const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'];
    if (!allowedKeys.includes(e.key)) {
      e.preventDefault();
    }
    // 按下Home键时自动跳转至可编辑区域起始位置
    if (e.key === 'Home') {
      e.preventDefault();
      textarea.setSelectionRange(editableStart, editableStart);
    }
  }
});

核心逻辑说明 #

• 内容校验与恢复：每次输入后，检查内容的固定部分（前n-10个字符）是否被修改，若被篡改则立即恢复为之前的有效内容，确保前半部分无法被编辑。
• 光标位置控制：通过setSelectionRange强制光标始终处于可编辑区域内，避免用户在固定部分输入内容；按下Home键时自动跳转到可编辑区域的起始位置。
• 按键拦截：拦截删除、剪切、输入字符等会修改固定部分的操作，仅允许方向键、Home/End键移动光标。

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