实现textarea中来自input的内容只读，允许追加自定义文本

我来帮你解决这个问题！你想要的效果是：textarea里从两个input同步来的「Chasis No: xxx, Engine No: xxx」这段内容保持只读，不能被删除或修改，但允许在这段内容后面添加自己的文本。原代码的问题在于，只要输入的内容不以前缀开头就直接重置整个textarea，这样用户根本没法在后面添加内容，咱们换个思路来实现：

核心思路 #

• 分别维护固定前缀内容和用户自定义内容两个变量
• 当input内容变化时，更新固定前缀，然后重新组合前缀+用户内容到textarea
• 监听textarea的输入事件，确保固定前缀始终保留，用户只能修改前缀之后的部分

修改后的完整代码 #

HTML（无需改动）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<textarea rows="4" cols="50" name="postContent" id="description"></textarea>

JavaScript

$(function() {
  const text1 = $('#text1');
  const text2 = $('#text2');
  const description = $('#description');
  
  // 维护两个变量：固定前缀和用户自定义内容
  let baseText = '';
  let userText = '';

  // 更新固定前缀并同步到textarea
  function updateBaseText() {
    baseText = `Chesis No: ${text1.val()}, Engine No: ${text2.val()}`;
    // 重新组合前缀和用户内容，更新textarea
    description.val(`${baseText}${userText}`);
  }

  // 监听textarea的输入事件，确保前缀不被修改
  description.on('input', function() {
    const currentVal = $(this).val();
    // 检查当前内容是否以前缀开头
    if (currentVal.startsWith(baseText)) {
      // 如果是，提取前缀之后的部分作为用户自定义内容
      userText = currentVal.slice(baseText.length);
    } else {
      // 如果前缀被修改/删除了，自动恢复前缀，并保留用户输入的有效部分
      userText = currentVal.replace(baseText, '');
      $(this).val(`${baseText}${userText}`);
    }
  });

  // 监听input的变化，更新前缀
  text1.on('change keyup', updateBaseText);
  text2.on('change keyup', updateBaseText);

  // 初始化一次前缀
  updateBaseText();
});

代码说明 #

1. 变量分离：用baseText存从input同步来的固定内容，userText存用户自己输入的部分，这样两者互不干扰
2. input事件处理：当用户修改input时，更新baseText，然后把baseText+userText重新赋值给textarea，确保前缀始终最新
3. textarea事件处理：
   • 如果当前内容以前缀开头，就把前缀之后的内容存到userText
   • 如果用户删除或修改了前缀，自动恢复前缀，并把用户输入的内容追加到前缀后面，保证前缀永远不被修改
4. 初始化：页面加载时先执行一次updateBaseText，确保textarea有初始的前缀内容

这样用户就可以自由地在固定前缀后面添加文本，而且不管怎么操作，前缀都不会被删除或修改啦！

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