jQuery输入框实时更新textarea内容时重复添加问题的解决方法

我明白你遇到的困扰了——每次删除输入框里的字符时，textarea里的内容会莫名重复叠加，这是因为原代码的逻辑是在已有文本基础上替换前缀，没有正确覆盖之前输入的内容。咱们直接来看修改后的方案，一步解决问题：

修改后的完整代码 #

HTML部分（保持你原有的结构）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<b>Name</b> 
<input type="text" name="name" id="name" required/> 
<b>Email</b> 
<input type="email" name="email" id="email" required/> 
<b>Message</b> 
<textarea rows="20" cols="20" name="message">Hello, xyz! My name is:  My email is: </textarea>

JavaScript部分

// 定义统一的更新函数，负责重新生成textarea的完整内容
function updateMessageTextarea() {
    // 获取输入框的值，为空时用空字符串兜底
    const userName = $("#name").val() || "";
    const userEmail = $("#email").val() || "";
    // 重新拼接完整的文本内容
    const fullText = `Hello, xyz! My name is: ${userName} My email is: ${userEmail}`;
    // 更新textarea的值
    $('textarea').val(fullText);
}

// 给两个输入框绑定输入事件，触发更新
$("#name, #email").keyup(updateMessageTextarea);

为什么原代码会出问题？ #

你原来的replace("My name is: ", "My name is: " + name)逻辑有个关键漏洞：比如输入"Alice"后，textarea内容是Hello, xyz! My name is: Alice My email is: ，当你删除字符变成"Alic"时，代码会把文本中第一个匹配到的My name is: 替换成My name is: Alic，结果就变成了Hello, xyz! My name is: Alic Alice My email is: ——旧的输入内容没有被覆盖，直接和新值叠在了一起。

而新方案的核心是每次完全重新生成textarea的内容，不管输入框是空还是有内容，都用当前最新的输入值拼接成完整文本，从根源上避免了重复叠加的问题，逻辑也更清晰易懂。

额外优化小建议 #

如果想让输入体验更顺滑，可以把keyup换成input事件，它能响应更多输入场景（比如粘贴文本、拖放内容等），只需要改一行代码：

$("#name, #email").on("input", updateMessageTextarea);

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