能否让两个textarea绑定同一原生输入事件而非逐次复制值？

可以通过共享单一数据源+精准同步操作的方式实现，避免每次全量重写整个文本内容，逻辑更接近专业编辑器的分屏原理：

核心思路 #

1. 共享数据源：不再让两个textarea各自维护独立的value，而是用一个全局变量存储唯一的文本内容，两个编辑器都从这个变量读取和更新内容。
2. 精准处理输入操作：监听textarea的input事件时，通过InputEvent的属性判断具体操作（插入、删除、粘贴等），只修改共享数据源中变化的部分，而非全量替换。
3. 同步光标位置：保持两个编辑器的光标选中状态一致，避免体验割裂。

代码示例（原生JS实现） #

<textarea id="editor1" style="width: 45%; height: 300px; float: left;"></textarea>
<textarea id="editor2" style="width: 45%; height: 300px; float: right;"></textarea>

<script>
// 共享的文本数据源
let sharedContent = '';
const editors = [document.getElementById('editor1'), document.getElementById('editor2')];

// 初始化编辑器内容
function initEditors() {
  editors.forEach(editor => editor.value = sharedContent);
}

// 同步光标选中位置
function syncSelection(source, target) {
  target.selectionStart = source.selectionStart;
  target.selectionEnd = source.selectionEnd;
}

// 精准处理输入操作，更新共享数据源
function handleInput(e) {
  const activeEditor = e.target;
  const targetEditor = editors.find(ed => ed !== activeEditor);
  const { inputType, data } = e;
  const { selectionStart, selectionEnd } = activeEditor;

  // 根据输入类型精准更新内容
  switch(inputType) {
    case 'insertText':
      // 插入单个/多个字符
      sharedContent = sharedContent.slice(0, selectionStart - data.length) + data + sharedContent.slice(selectionStart - data.length);
      break;
    case 'deleteContentBackward':
      // 回删字符
      if (selectionStart > 0) {
        sharedContent = sharedContent.slice(0, selectionStart - 1) + sharedContent.slice(selectionStart);
      }
      break;
    case 'deleteContentForward':
      // 删除光标后字符
      if (selectionEnd < sharedContent.length) {
        sharedContent = sharedContent.slice(0, selectionStart) + sharedContent.slice(selectionEnd + 1);
      }
      break;
    case 'insertFromPaste':
      // 粘贴内容（替换选中区域或插入到光标）
      sharedContent = sharedContent.slice(0, selectionStart) + data + sharedContent.slice(selectionEnd);
      break;
    default:
      // 无法识别的操作类型，兜底用全量同步
      sharedContent = activeEditor.value;
      break;
  }

  // 同步内容和光标到另一个编辑器
  targetEditor.value = sharedContent;
  syncSelection(activeEditor, targetEditor);
}

// 监听光标变化，同步选中状态
function handleSelectionChange(e) {
  const activeEditor = e.target;
  const targetEditor = editors.find(ed => ed !== activeEditor);
  syncSelection(activeEditor, targetEditor);
}

// 绑定事件
editors.forEach(editor => {
  editor.addEventListener('input', handleInput);
  editor.addEventListener('selectionchange', handleSelectionChange);
});

// 初始化
initEditors();
</script>

补充说明 #

• 这种方式只修改文本中变化的部分，处理大文本时性能远优于全量替换value的方案。
• InputEvent的inputType属性在不同浏览器可能存在细微差异，实际使用中可以根据需求扩展更多操作类型的处理逻辑。
• 专业编辑器（如VS Code）的分屏原理本质是共享文档模型，所有编辑操作都作用于模型，多个视图（分屏）同步渲染模型内容，和这个思路一致，只是他们的文档模型会更复杂（支持语法解析、折叠等功能）。

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