将文本从一个 textarea 元素实时复制到另一个

Question

我想将输入从一个文本区域实时复制到另一个文本区域。这不是 HTML 编辑器或富文本编辑器。只是没有任何标记的纯文本。

这就是我正在做的事情：

一个。我可以使用以下（在 mouseup）

检测在源文本区域中单击光标的点

 $("#txt1")[0].selectionStart)

b。我可以使用 mouseup 上的 selectionStart 和 selectionEnd 属性检测文本选择。这允许我跟踪删除以反映在其他文本区域中。也就是说，如果按下的是删除键，并且进行了选择，我知道删除的内容会在目标文本区域中重新显示。

c。我被困的地方是输入新字符的简单问题。我认为跟踪按下的键是一种低效的方法，因为我必须检查 control、alt、shift 键等是否也被按下。此外还有重复按键的问题。 有效的方法可能是从源文本区域获取实际输入的字符，而不是基于按下的键。

问题：如何获取源文本区域中输入的字符？

有没有更好的实时更新目标textarea的方法？一种方法是定期不断地将内容从源更新到目标，但这效率很低。还有其他方法吗？

我愿意使用 contentEditable div 代替文本区域。

我需要一个可以跨不同设备类型工作的解决方案。

Answer 1

How do I get characters entered in the source textarea?

只需处理第一个 textarea 的 input 事件并使第二个 textarea 具有与第一个相同的值。

let two = document.getElementById("two");
document.getElementById("one").addEventListener("input", function(){
  two.value = this.value;
});

<textarea id="one"></textarea>
<textarea id="two"></textarea>

Copying text from one textarea element to another in real-time