Angular中如何实现预置内容不可编辑的textarea文本域

核心逻辑不要绕：不要试图拦截所有用户操作路径（右键、拖拽、快捷键、菜单操作的场景多到拦不完），核心兜底逻辑是任何输入操作触发后，都强制校验内容开头必须和固定前缀完全一致，一旦发现前缀被改动就立刻还原，同时限制光标永远不能进入前缀区域。

方案1：原生textarea + 事件兜底（最稳定，无兼容问题） #

这个方案不需要额外嵌套DOM，没有滚动不同步、样式错位的问题，覆盖所有输入场景：

• 提前定义固定前缀内容，记录前缀长度
• 绑定输入、选中变化、键盘事件做三层校验
• 所有操作后强制校验前缀完整性，自动修正光标位置

组件代码示例：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-prefix-textarea',
  template: `
    <textarea 
      #textArea
      class="prefix-textarea"
      [value]="content"
      (input)="handleInput($event)"
      (keydown)="handleKeydown($event)"
      (selectionChange)="handleSelection()"
      rows="8"
      class="w-full p-2 border rounded resize-y"
    ></textarea>
  `
})
export class PrefixTextareaComponent {
  @ViewChild('textArea') textArea!: ElementRef<HTMLTextAreaElement>;
  // 替换为实际需要固定的预置内容，支持换行
  fixedPrefix = '【服务协议须知】\n1. 本平台内容仅供参考...\n2. 用户需遵守相关法律法规...\n---\n';
  prefixLength = this.fixedPrefix.length;
  content = this.fixedPrefix;

  // 兜底处理所有输入场景：打字、粘贴、剪切、拖拽文本、输入法输入等
  handleInput(e: Event) {
    const textarea = this.textArea.nativeElement;
    const currentValue = textarea.value;

    // 只要前缀被改动，立刻还原固定前缀，保留用户在后半段输入的合法内容
    if (!currentValue.startsWith(this.fixedPrefix)) {
      const userPart = currentValue.replace(this.fixedPrefix, '');
      this.content = this.fixedPrefix + userPart;
      textarea.value = this.content;
    } else {
      this.content = currentValue;
    }

    this.forceCursorToValidRange();
  }

  // 拦截快捷键的非法操作
  handleKeydown(e: KeyboardEvent) {
    const textarea = this.textArea.nativeElement;
    const selectStart = textarea.selectionStart;
    const selectEnd = textarea.selectionEnd;

    // 选中范围覆盖前缀区域时，拦截删除、剪切操作
    if (selectStart < this.prefixLength) {
      const blockedActions = ['Backspace', 'Delete', 'Cut'];
      const isCutShortcut = e.ctrlKey && ['x', 'X'].includes(e.key);
      if (blockedActions.includes(e.key) || isCutShortcut) {
        e.preventDefault();
        textarea.setSelectionRange(this.prefixLength, Math.max(selectEnd, this.prefixLength));
        return;
      }
    }

    // 全选后删除/剪切，只保留固定前缀
    if (selectStart === 0 && selectEnd === textarea.value.length) {
      const blockedActions = ['Backspace', 'Delete', 'Cut'];
      const isCutShortcut = e.ctrlKey && ['x', 'X'].includes(e.key);
      if (blockedActions.includes(e.key) || isCutShortcut) {
        e.preventDefault();
        this.content = this.fixedPrefix;
        textarea.value = this.content;
        textarea.setSelectionRange(this.prefixLength, this.prefixLength);
      }
    }
  }

  // 禁止选中前缀区域的内容
  handleSelection() {
    const textarea = this.textArea.nativeElement;
    const selectStart = textarea.selectionStart;
    const selectEnd = textarea.selectionEnd;
    if (selectStart < this.prefixLength) {
      textarea.setSelectionRange(this.prefixLength, Math.max(selectEnd, this.prefixLength));
    }
  }

  // 强制光标不能停在前缀区域
  private forceCursorToValidRange() {
    const textarea = this.textArea.nativeElement;
    const cursorPos = textarea.selectionStart;
    if (cursorPos < this.prefixLength) {
      textarea.setSelectionRange(this.prefixLength, this.prefixLength);
    }
  }

  // 对外暴露获取用户输入内容的方法，提交表单时调用即可
  getUserInput() {
    return this.content.slice(this.prefixLength);
  }
}

方案2：视觉分层方案（支持前缀自定义样式） #

如果需要给固定前缀加灰色、不可选中的视觉提示，可以用双层DOM模拟textarea效果：

• 外层容器模拟输入框边框、内边距样式
• 容器内前置一个不可选中的div放固定内容
• 后面放无边框、无轮廓的textarea占满剩余空间，点击外层容器自动聚焦输入区

模板示例：

<div class="custom-textarea-wrapper" (click)="editableArea.focus()">
  <div class="fixed-prefix">{{ fixedPrefix }}</div>
  <textarea 
    #editableArea
    class="editable-area"
    [(ngModel)]="userInput"
    rows="6"
  ></textarea>
</div>

配套样式：

.custom-textarea-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  cursor: text;
}
.fixed-prefix {
  color: #909399;
  user-select: none;
  pointer-events: none;
  white-space: pre-wrap;
}
.editable-area {
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  margin-top: 4px;
  width: 100%;
}

这个方案需要额外处理滚动同步、高度自适应问题，适合对样式定制要求高的场景。

避坑提醒 #

• 不要只靠拦截键盘事件做限制：右键粘贴/剪切、拖拽选中文本删除、全选替换等操作都能绕开键盘拦截，必须在input事件做前缀校验兜底
• 不要忽略光标逻辑：如果允许光标停在不可编辑的前缀区域，用户会产生“为什么我点进去打不了字”的困惑，只要光标进入前缀区域就自动跳到前缀末尾即可
• 表单提交时记得去掉固定前缀，只传用户实际输入的内容，避免冗余数据

实现效果参考：

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