如何通过keydown/keyup事件实现div与input的内容广播同步？

我懂你现在的痛点——硬编码每个元素的同步逻辑太繁琐了，尤其是当同组元素数量多的时候。咱们来打造一个通用的解决方案，只需要指定组名（类名），就能让同组里的所有输入元素（不管是contenteditable的div还是input框）自动同步内容。

完整解决方案代码 #

HTML

<div id="div1" class="element">
  <div class="reciever1 element" contenteditable>Reciever 1</div>
  <div class="reciever1 element" contenteditable>Reciever 1</div>
  <input type="text" class="reciever1 element" placeholder="Reciever 1 Input" />
</div>
<div id="div2" class="element">
  <div class="reciever2 element" contenteditable>Reciever 2</div>
  <div class="reciever2 element" contenteditable>Reciever 2</div>
  <input type="text" class="reciever2 element" placeholder="Reciever 2 Input" />
</div>

CSS

#div1,#div2 { position: absolute; width: calc(50% - 8px);}
#div2 { right: 0;}
.element { height: 60px; text-align: center; font-size: 20px; line-height: 60px; font-family: sans-serif; outline: none; background: #F0F2F7; margin-bottom: 10px; color: #3D4757; }
.receiver {}
input { width: 100%; height: 60px; font-size: 20px; border: none; outline: none; color: #3D4757; background: #F0F2F7; text-align: center; margin: 0; padding: 0; }
input::-webkit-input-placeholder { color: #3D4757; opacity: .25;}

JavaScript

function setupBroadcast(groupClassName) {
  // 获取同组的所有元素
  const groupElements = [...document.getElementsByClassName(groupClassName)];
  
  // 定义同步内容的函数
  function syncContent(sourceElement) {
    // 获取源元素的内容，区分contenteditable和input
    const content = sourceElement.hasAttribute('contenteditable') 
      ? sourceElement.textContent.trim() 
      : sourceElement.value.trim();
    
    // 遍历同组元素，同步内容
    groupElements.forEach(element => {
      // 跳过源元素本身，避免循环触发
      if (element === sourceElement) return;
      
      // 根据元素类型设置内容
      if (element.hasAttribute('contenteditable')) {
        element.textContent = content;
      } else if (element.tagName === 'INPUT') {
        element.value = content;
      }
    });
  }
  
  // 给每个元素绑定input事件（覆盖所有内容变化场景：键盘输入、粘贴、拖拽等）
  groupElements.forEach(element => {
    element.addEventListener('input', function() {
      syncContent(this);
    });
  });
}

// 给两个组分别设置同步
setupBroadcast("reciever1");
setupBroadcast("reciever2");

关键改进说明 #

• 用input事件替代keydown/keyup：input事件会响应所有内容变化的场景，包括键盘输入、鼠标粘贴、拖拽文本甚至语音输入，比监听按键事件更全面可靠。
• 通用的内容获取与设置：
  • 对于contenteditable元素，用textContent而不是innerHTML，避免意外插入HTML标签，更安全。
  • 对于input元素，直接用value属性，这是输入框内容的正确操作方式（你原来的代码里用innerHTML给input赋值是错误的）。
• 避免循环触发：在同步时跳过触发事件的源元素，防止同一个元素反复触发同步逻辑。
• 一次绑定，全组生效：只需要调用一次setupBroadcast并传入组类名，组内所有元素就自动建立同步关系，不用再逐个硬编码。

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