Material-UI中如何禁止用户删除TextField开头的固定初始文本

核心做两层防护，既保证内容永远以指定前缀开头，也不影响用户后续正常输入体验：

• 第一层：输入内容校验，所有变更操作后强制校验前缀，若前缀被删除/修改，自动补回正确前缀
• 第二层：光标位置校正，避免补全前缀时光标错位、或者光标跳到前缀区域让用户能编辑前缀部分

直接替换原有代码即可，完整实现如下：

import { useState, useRef, useEffect } from 'react';
import TextField from '@mui/material/TextField';

export default function FixedPrefixTextField() {
  const initialValue = "This taught me"
  const [response, setResponse] = useState(initialValue);
  const textInput = useRef(null);

  // 处理输入变更，强制保留前缀
  const handleChange = (e) => {
    let inputVal = e.target.value;
    // 如果当前输入内容不是以前缀开头，强制补回前缀
    if (!inputVal.startsWith(initialValue)) {
      // 转义前缀里的正则特殊字符，避免匹配失效
      const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      // 提取用户在前缀之后输入的内容，过滤掉被篡改的前缀部分
      const userInputPart = inputVal.replace(new RegExp(`^.*?${escapeRegExp(initialValue)}`), '');
      inputVal = initialValue + userInputPart;
    }
    setResponse(inputVal);
  };

  // 监听选择事件，防止用户选中前缀区域编辑/删除
  const handleSelect = () => {
    const input = textInput.current;
    if (!input) return;
    // 光标/选中区域的起始位置不能小于前缀长度，禁止选中前缀部分
    if (input.selectionStart < initialValue.length) {
      input.setSelectionRange(initialValue.length, Math.max(input.selectionEnd, initialValue.length));
    }
  };

  // 自动聚焦时光标定位到前缀末尾，不要让光标落到前缀里
  useEffect(() => {
    if (textInput.current) {
      textInput.current.setSelectionRange(initialValue.length, initialValue.length);
    }
  }, []);

  return (
    <TextField  
      multiline
      minRows={3} 
      onChange={handleChange}
      value={response}
      autoFocus={true}
      inputRef={textInput}
      onSelect={handleSelect}
    />
  )
}

实现说明 #

• 前缀匹配做了特殊字符转义，就算初始文本里包含.、*这类正则特殊符号也能正常匹配，不会出现校验失效
• 加了选中事件拦截：用户没法选中前缀部分的文字，从交互层就避免了用户误删前缀的可能
• 自动聚焦时光标默认落在前缀末尾，用户打开就能直接输入后续内容，不需要手动点到前缀后面
• 就算用户通过快捷键全选、拖拽选中文本覆盖，也只会替换前缀之后的内容，前缀永远保留

如果不需要严格的交互拦截，也可以去掉onSelect和useEffect里的光标控制逻辑，只保留onChange里的前缀补全逻辑，也能实现“内容永远以指定文本开头”的基础需求，只是用户还是能选中前缀，删除后会自动补回。

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