如何实现textarea文本框部分内容只读 仅允许在已有内容末尾输入

方案1：原生textarea输入拦截（推荐，视觉和交互体验统一） #

核心逻辑 #

• 单独存储已经锁定不可修改的内容，每次程序主动追加内容时更新该存储值
• 拦截键盘操作，禁止光标移动到锁定内容区域，禁止删除锁定内容
• 兜底所有输入变更，即使用户通过右键剪切/粘贴修改了锁定区域，也会自动恢复
  完整可运行代码：

<textarea id="textArea" rows="10" cols="50"></textarea>
<br>
<button onclick="appendLockedContent()">Append</button>

<script>
const textarea = document.getElementById('textArea')
// 存储已锁定不可编辑的完整内容
let lockedContent = ''

// 替换你原有的test函数，用于追加锁定内容
function appendLockedContent() {
  const needAppendStr = 'this is a string to be appended to text area\n'
  // 更新锁定内容
  lockedContent += needAppendStr
  // 刷新textarea展示
  textarea.value = lockedContent
  // 自动将光标移动到内容末尾
  const endPosition = lockedContent.length
  textarea.setSelectionRange(endPosition, endPosition)
}

// 拦截键盘操作，避免用户操作锁定区域
textarea.addEventListener('keydown', e => {
  const selectStart = textarea.selectionStart
  const selectEnd = textarea.selectionEnd
  const lockedLen = lockedContent.length

  // 禁止选中范围包含锁定区域
  if (selectStart < lockedLen || selectEnd < lockedLen) {
    textarea.setSelectionRange(lockedLen, lockedLen)
  }
  // 禁止在锁定区域边界按退格删除锁定内容
  if (e.key === 'Backspace' && selectStart <= lockedLen) {
    e.preventDefault()
  }
  // 禁止左方向键移动到锁定区域内
  if (e.key === 'ArrowLeft' && selectStart <= lockedLen) {
    e.preventDefault()
  }
})

// 兜底处理所有输入变更，覆盖右键剪切、粘贴等特殊操作场景
textarea.addEventListener('input', () => {
  const lockedLen = lockedContent.length
  const currentLockedPart = textarea.value.slice(0, lockedLen)
  // 锁定区域被修改时恢复
  if (currentLockedPart !== lockedContent) {
    // 保留用户在锁定区域后输入的内容
    const userInputPart = textarea.value.slice(lockedLen)
    textarea.value = lockedContent + userInputPart
    // 光标重置到内容末尾
    const newPosition = textarea.value.length
    textarea.setSelectionRange(newPosition, newPosition)
  }
})
</script>

方案2：DOM拆分模拟（兼容性最高，无边缘case问题） #

如果不想处理各种输入事件的拦截逻辑，可以用视觉模拟的方式实现：

• 外层套一个带边框的容器，样式和原生textarea保持一致
• 内层上方放div展示已锁定的只读内容，设置和textarea相同的字体、行高、背景，去掉边框
• 内层下方放无边框的textarea，只用于接收用户输入，设置自动高度
  这种方案完全不存在内容被误改的可能，适合对稳定性要求高的场景。

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