如何将用户在表单输入的内容动态添加到textarea文本域中？

HTML原生不支持自定义variable属性、$variable占位符自动替换的能力，你需要搭配JavaScript实现变量绑定和文本替换功能，以下是可直接运行的实现代码：

实时输入同步更新效果（输入时自动填充） #

<form>
    <label for="yname">你的姓名：</label><br>
    <input type="text" id="yname" name="yname" placeholder="请输入姓名"><br>
</form>
<textarea id="greetingText" rows="5" cols="30">
Hello, {{name}}!
</textarea>

<script>
// 读取对应的DOM元素
const nameInput = document.getElementById('yname');
const greetingTextarea = document.getElementById('greetingText');
// 提前存储textarea里的原始模板，防止占位符被覆盖后无法继续替换
const originTemplate = greetingTextarea.value.trim();

// 监听输入框的输入事件，实时替换内容
nameInput.addEventListener('input', function() {
    const currentName = nameInput.value.trim() || '[未输入姓名]';
    greetingTextarea.value = originTemplate.replace('{{name}}', currentName);
});
</script>

点击提交按钮后更新效果 #

如果需要用户输入完成点击提交才填充内容，可以用以下逻辑：

<form id="nameForm">
    <label for="yname">你的姓名：</label><br>
    <input type="text" id="yname" name="yname" placeholder="请输入姓名"><br>
    <input type="submit" value="提交">
</form>
<textarea id="greetingText" rows="5" cols="30">
Hello, {{name}}!
</textarea>

<script>
const nameForm = document.getElementById('nameForm');
const nameInput = document.getElementById('yname');
const greetingTextarea = document.getElementById('greetingText');
const originTemplate = greetingTextarea.value.trim();

nameForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    const currentName = nameInput.value.trim() || '[未输入姓名]';
    greetingTextarea.value = originTemplate.replace('{{name}}', currentName);
});
</script>

关键逻辑说明 #

• 提前保存原始模板是为了避免第一次替换后占位符消失，后续修改姓名无法正常更新内容
• 占位符可以自定义，你想用$variable也可以，只要replace方法的第一个参数和你模板里的占位符保持一致即可
• 如果有多个变量要替换，只需要在模板里加对应的占位符，多写几次replace调用就行

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