title: How to sync two textareas?
body: <p>I am trying to show whatever is typed/pasted/cut/deleted in one textarea in another textarea. But I'm having problem when backspace and delete is pressed. I'll probably have problem with deleting selections, cuting, pasting, undo, redo etc aswell. How can I best solve this problem? Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Live Text Sync&lt;/title&gt;
    &lt;meta charset="utf-8"/&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;textarea id="a"&gt;&lt;/textarea&gt;
    &lt;textarea id="b"&gt;&lt;/textarea&gt;
    &lt;script&gt;
     var a = document.getElementById("a");
     var b = document.getElementById("b");
     a.onkeydown = function(e) {
      if(!e.ctrlKey) {
       if (e.which &gt;= 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 &lt; a.selectionEnd ? a.selectionEnd : a.selectionEnd + 1;
        b.value = text.substring(0, a.selectionStart) + text.substring(van);
       }
      }
      
     }
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>