如何用单个JS函数实现onkeyup事件多ID下的输入内容实时回显

JavaScript 代码 #

仅需定义一次通用处理函数即可全局复用：

function updateDisplay(input) {
  const group = input.dataset.targetGroup;
  const displayItems = document.querySelectorAll(`[data-group="${group}"]`);
  displayItems.forEach(item => item.textContent = input.value);
}

HTML 代码 #

通过自定义属性绑定输入框和对应展示元素，无需维护ID规则：

<!-- 第一组输入+展示 -->
<span class="text-box">
  <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="updateDisplay(this);" data-target-group="input1">
</span><br><br>
<span data-group="input1">Input11</span><br>
<span data-group="input1">Input12</span><br>
<span data-group="input1">Input13</span><br><br>

<!-- 第二组输入+展示 -->
<span class="text-box">
  <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="updateDisplay(this);" data-target-group="input2">
</span><br><br>
<span data-group="input2">Input21</span><br>
<span data-group="input2">Input22</span><br>
<span data-group="input2">Input23</span><br><br>

新增同类型效果仅需两步，无需修改JS代码：

• 新增输入框添加onkeyup="updateDisplay(this);"属性，同时设置data-target-group为自定义分组名
• 所有需要同步展示该输入框内容的元素，添加data-group属性，值和输入框的data-target-group保持一致即可

• 修复了原代码中ID重复的规范问题
• 使用textContent替代innerHTML，避免XSS注入风险
• 支持单个输入框绑定任意数量的展示位置，无数量限制

内容的提问来源于stack exchange，提问作者Bhushan Balasaheb Sahane