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

Question

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

这就是我正在做的：

a。我可以使用以下(在鼠标上(在源文本区域中检测光标被点击的点

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

b。我可以使用mouseup上的selectionStart和selectionEnd属性来检测文本选择。这使我能够跟踪删除，以便反映在其他文本区域中。也就是说，如果按下删除键，并且进行了选择，我知道在目标文本区域中删除了什么。

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

问题：如何在源文本区域输入字符？

是否有更好的方法实时更新目标文本区域？一种方法是定期从源到目标不断更新内容，但这将是低效的。还有其他方法吗？

我对使用contentEditablediv代替文本区域持开放态度。

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

Answer 1

如何在源文本区域输入字符？

只需处理第一个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>