如何编写可复用JS函数实现不同input输入内容实时同步到对应div

首先要注意：HTML 规范中同一个页面的 ID 必须唯一，原来多组重复使用 inputBox、displayBox ID 的写法不符合规范，会导致选择器只能拿到第一个匹配元素。

下面给出两种可复用的实现方案，新增组时不需要额外写 JS 逻辑：

方案一：自定义属性配对（灵活性最高） #

不需要固定元素位置，输入框和展示容器可以放在页面任意位置，通过自定义属性关联配对。

HTML 结构示例 #

<body>
  <!-- 第一组 -->
  <input type="text" class="sync-input" data-display-target="display1">
  <div id="display1" class="sync-display"></div>

  <!-- 第二组 -->
  <input type="text" class="sync-input" data-display-target="display2">
  <div id="display2" class="sync-display"></div>

  <!-- 更多组直接新增即可，支持元素位置不相邻 -->
  <div class="form-item">
    <input type="text" class="sync-input" data-display-target="display3">
  </div>
  <p>其他页面内容</p>
  <div id="display3" class="sync-display"></div>
</body>

通用 JS 代码 #

document.addEventListener('DOMContentLoaded', function() {
  // 自动选中所有需要同步的输入框
  const syncInputs = document.querySelectorAll('.sync-input');
  
  syncInputs.forEach(input => {
    // 用input事件覆盖所有输入场景：键盘输入、粘贴、拖拽输入、输入法选字等
    input.addEventListener('input', function() {
      const targetId = this.dataset.displayTarget;
      const displayEl = document.getElementById(targetId);
      if (displayEl) {
        // 纯文本展示用textContent更安全，需要渲染HTML标签可替换为innerHTML
        displayEl.textContent = this.value;
      }
    });
  });
});

方案二：相邻元素配对（最省心） #

如果你的页面结构固定为「输入框后面紧跟对应的展示div」，可以不用写ID，直接通过元素相对位置自动配对。

HTML 结构示例 #

<body>
  <!-- 第一组 -->
  <input type="text" class="sync-input">
  <div class="sync-display"></div>

  <!-- 第二组 -->
  <input type="text" class="sync-input">
  <div class="sync-display"></div>

  <!-- 更多组直接按结构新增即可 -->
  <input type="text" class="sync-input">
  <div class="sync-display"></div>
</body>

通用 JS 代码 #

document.addEventListener('DOMContentLoaded', function() {
  const syncInputs = document.querySelectorAll('.sync-input');
  
  syncInputs.forEach(input => {
    input.addEventListener('input', function() {
      // 取当前输入框后面第一个相邻元素作为展示容器
      const displayEl = this.nextElementSibling;
      if (displayEl && displayEl.classList.contains('sync-display')) {
        displayEl.textContent = this.value;
      }
    });
  });
});

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