如何将输入框内容镜像到主输入框？求优化方案及粘贴事件解决办法

问题2：粘贴操作完成后触发的事件 #

• 优先用input事件：这个事件会在输入框内容任何变更完成后触发，覆盖键盘输入、鼠标粘贴、右键粘贴、拖拽文本、语音输入等所有场景，完全解决你遇到的粘贴时机问题。
• 补充：paste事件是在粘贴动作开始前触发的，此时还拿不到新粘贴的内容，若要基于它处理，需要配合setTimeout延迟执行，但远不如input事件直接可靠。

问题1：更优的输入框镜像实现方案 #

直接通过input事件监听目标输入框，实时同步内容到主输入框，这是最简洁可靠的方案，代码示例：

// 假设主输入框id为mainInput，需要镜像的输入框id为mirrorInput
const mainInput = document.getElementById('mainInput');
const mirrorInput = document.getElementById('mirrorInput');

mirrorInput.addEventListener('input', function() {
  mainInput.value = this.value;
});

• 核心优势：
  • 全场景覆盖：无需单独处理多种输入事件，所有内容变更动作都能触发同步。
  • 时机精准：内容变更完成后才执行同步，不会出现内容不同步的情况。
  • 代码简洁，后续维护成本低。

如果需要双向同步（主输入框内容变更时也同步到目标输入框），可以添加标记避免循环触发：

let isSyncing = false;

mirrorInput.addEventListener('input', function() {
  if (!isSyncing) {
    isSyncing = true;
    mainInput.value = this.value;
    isSyncing = false;
  }
});

mainInput.addEventListener('input', function() {
  if (!isSyncing) {
    isSyncing = true;
    mirrorInput.value = this.value;
    isSyncing = false;
  }
});

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