如何优化JavaScript函数，批量处理多输入框的值展示？

针对你要处理10个输入框的场景，完全不用写10个重复函数，下面给你几种简洁的优化方案，核心思路是复用逻辑、减少冗余代码：

方案1：基于命名约定的通用函数 #

如果你的输入框和对应展示元素的id遵循固定规则（比如输入框id是xxx，展示元素id是xxx_message），可以直接写一个通用函数：

HTML结构示例 #

<!-- 输入框1 -->
<input type="text" id="goto" oninput="updateContent(this)">
<div id="goto_message"></div>

<!-- 输入框2 -->
<input type="text" id="wait" oninput="updateContent(this)">
<div id="wait_message"></div>

<!-- 剩下8个输入框按同样规则命名即可 -->

JS代码 #

function updateContent(input) {
    // 从输入框id拼接出对应展示元素的id
    const displayId = `${input.id}_message`;
    const displayElement = document.getElementById(displayId);
    // 确保找到元素后再更新，避免报错
    if (displayElement) {
        // 用textContent比innerHTML更安全，防止用户输入恶意HTML
        displayElement.textContent = input.value;
    }
}

方案2：用数据属性自定义目标元素 #

如果不想被命名规则限制，可以给输入框加data-target属性，直接指定要更新的展示元素id，灵活性更高：

HTML结构示例 #

<input type="text" id="goto" data-target="show_goto" oninput="updateContent(this)">
<div id="show_goto"></div>

<input type="text" id="wait" data-target="show_wait" oninput="updateContent(this)">
<div id="show_wait"></div>

JS代码 #

function updateContent(input) {
    // 获取输入框上指定的目标元素id
    const targetId = input.dataset.target;
    const displayElement = document.getElementById(targetId);
    if (displayElement) {
        displayElement.textContent = input.value;
    }
}

方案3：事件委托（推荐，无内联事件） #

如果不想在HTML里写oninput内联事件，可以用事件委托统一绑定，代码更解耦：

HTML结构示例 #

<!-- 给所有需要处理的输入框加同一个类 -->
<input type="text" id="goto" class="content-input" data-target="goto_message">
<div id="goto_message"></div>

<input type="text" id="wait" class="content-input" data-target="wait_message">
<div id="wait_message"></div>

JS代码 #

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 监听所有带content-input类的输入框的input事件
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('content-input')) {
            const targetId = e.target.dataset.target;
            const displayElement = document.getElementById(targetId);
            if (displayElement) {
                displayElement.textContent = e.target.value;
            }
        }
    });
});

这几种方案都能让你用一个函数处理任意数量的输入框，新增输入框时只要按对应规则写HTML就行，不用修改JS代码，维护起来省心很多。

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