如何同步两个文本区域？

Question

我试图在另一个文本区域中显示一个文本区域中的 typed/pasted/cut/deleted 内容。但是当按下退格键和删除键时我遇到了问题。我可能还会遇到删除选择、剪切、粘贴、撤消、重做等方面的问题。我怎样才能最好地解决这个问题？代码：

<html>
 <head>
  <title>Live Text Sync</title>
  <meta charset="utf-8"/>
 </head>
 <body>
  <textarea id="a"></textarea>
  <textarea id="b"></textarea>
  <script>
   var a = document.getElementById("a");
   var b = document.getElementById("b");
   a.onkeydown = function(e) {
    if(!e.ctrlKey) {
     if (e.which >= 65) {//A
      var letter = String.fromCharCode(e.which);
      if (!e.shiftKey) letter = letter.toLowerCase();
      b.value = b.value.substring(0, a.selectionStart) + letter + b.value.substring(a.selectionEnd);
     } else if (e.which === 8) {//backspace
       var text = b.value;
       var till = a.selectionStart === 0 ? 0 : a.selectionStart - 1;
       b.value = text.substring(0, till) + text.substring(a.selectionEnd);
     } else if (e.which === 46) {//delete
      var text = b.value;
      var van = text.length < a.selectionEnd ? a.selectionEnd : a.selectionEnd + 1;
      b.value = text.substring(0, a.selectionStart) + text.substring(van);
     }
    }
    
   }
  </script>
 </body>
</html>

Answer 1

有什么理由不使用 .value 来同步 2 textareas 吗？

<html>

<head>
  <title>Live Text Sync</title>
  <meta charset="utf-8" />
</head>

<body>
  <textarea id="a"></textarea>
  <textarea id="b"></textarea>
  <script>
    var a = document.getElementById("a");
    var b = document.getElementById("b");
    a.oninput = function(e) {
      b.value = a.value;
    }
  </script>
</body>

</html>

如何同步两个文本区域？

How to sync two textareas?

html

javascript

textarea