实现输入框/下拉框变更时实时更新文本域内容的问题

核心问题分析 #

你当前代码的问题在于直接修改了文本域的内容，导致原始模板中的变量占位符被永久替换，后续再修改输入时找不到可替换的占位符，功能失效。要解决这个问题，核心思路是保留原始模板，每次控件变化时都基于原始模板重新生成文档，同时支持输入框和下拉框的实时响应。

完整实现代码 #

<!DOCTYPE html>
<html>
<body>
    <form action="" method="POST">
        <div>
            <label>姓名：</label>
            <input type="text" name="firstname" placeholder="输入姓名" />
        </div>
        <div>
            <label>对象：</label>
            <input type="text" name="whoisthis" placeholder="输入对象名称" />
        </div>
        <div>
            <label>职位：</label>
            <input type="text" name="positionwithin" placeholder="输入职位名称" />
        </div>
        <div>
            <label>排名：</label>
            <select name="rank">
                <option value="1st">第1名</option>
                <option value="2nd">第2名</option>
                <option value="3rd">第3名</option>
                <option value="4th" selected>第4名</option>
            </select>
        </div>
        <div>
            <textarea style="width:500px; height: 150px;" name="result"></textarea>
        </div>
        <button type="button" onclick="copyResult()">复制文本</button>
    </form>

    <script>
        // 保存原始模板，避免被修改后丢失占位符
        const originalTemplate = `Hello, {{firstname}}

I am writing to inform you that {{whoisthis}} is no longer available for the position of {{positionwithin}}. They finished {{rank}}.`;
        
        // 获取所有输入控件（input、select）
        const controls = document.querySelectorAll('input[name], select[name]');
        const resultTextarea = document.querySelector('textarea[name="result"]');

        // 初始化渲染一次
        renderDocument();

        // 给所有控件添加实时监听
        controls.forEach(control => {
            control.addEventListener('input', renderDocument);
        });

        // 核心渲染函数：基于原始模板替换所有变量
        function renderDocument() {
            let finalText = originalTemplate;
            // 遍历所有控件，替换对应占位符
            controls.forEach(control => {
                const placeholder = `{{${control.name}}}`;
                // 全局替换所有匹配的占位符
                finalText = finalText.replace(new RegExp(placeholder, 'g'), control.value || '');
            });
            resultTextarea.value = finalText;
        }

        // 复制文本功能
        function copyResult() {
            resultTextarea.select();
            document.execCommand('copy');
            alert('文本已复制到剪贴板');
        }
    </script>
</body>
</html>

关键改进点 #

• 保留原始模板：用单独变量存储原始模板字符串，确保每次渲染都从干净的模板出发，不会丢失占位符
• 实时响应：使用input事件替代onblur，输入框打字、下拉框选择时立即更新文档
• 支持下拉框：新增的下拉框和输入框统一处理，只需保证name属性和模板中的{{变量名}}占位符对应即可
• 可扩展性：后续新增控件时，只需添加对应name的输入/下拉框，并在模板中加入{{name}}占位符，无需修改JS逻辑
• 复制功能：添加一键复制按钮，方便直接使用生成的文本

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