如何实现输入框复用，实时同步输入内容至textarea组件？

要实现输入框输入不同名称时，textarea文本实时变化且可重复使用，需要解决两个核心问题：

• 去掉按钮触发，改为输入框内容变化时自动更新
• 保留textarea的原始模板，避免替换后丢失占位符无法重复替换

修改后的完整代码 #

HTML部分

<div class="input">
  <input class="name" type="text" id="name" maxlength="100" value="" placeholder="Enter name">
</div>

<textarea class="box" id="text1">Hello name</textarea>
<button class="btn1" style="vertical-align:top;">Copy</button>

<textarea class="box" id="text2">Welcome name</textarea>
<button class="btn2" style="vertical-align:top;">Copy</button>

JavaScript部分

// 保存每个textarea的原始模板，避免替换后丢失占位符
const textTemplates = {
  text1: document.getElementById('text1').value,
  text2: document.getElementById('text2').value
};

// 获取输入框元素
const nameInput = document.getElementById('name');

// 监听输入框的内容变化事件
nameInput.addEventListener('input', function() {
  const currentName = this.value.trim();
  // 遍历所有需要更新的textarea
  for (let i = 1; i < 3; i++) {
    const textarea = document.getElementById(`text${i}`);
    // 基于原始模板替换占位符，空输入时还原默认占位符
    const updatedText = textTemplates[`text${i}`].replaceAll(/name/gi, currentName || 'name');
    textarea.value = updatedText;
  }
});

关键说明 #

• 保存原始模板：页面加载时就把每个textarea的初始内容存在textTemplates里，每次更新都基于这个模板替换，保证不管输入多少次新名称，都能正确识别占位符。
• 实时监听输入：用input事件替代按钮点击，输入框内容一变化就触发更新，实现实时同步效果。
• 处理空输入：如果输入框为空，自动把占位符还原成"name"，避免显示空白内容。

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