How can I "undo" the programmatic insertion of text into a textarea?

Question

I have a textarea and a button. Clicking the button causes text to be inserted into the textarea.

Is there a way to allow a user to press Ctrl/Cmd+z to undo the insertion of text and revert the textarea to its previous state?

Answer 1

I think the easiest approach to leverage browser's undo stack instead of capturing events.

To do this you need to use different codes for different browsers. Luckily out of all major browsers only Firefox has a different approach.

// http://stackoverflow.com/a/9851769/529024  // Opera 8.0+  var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;    // Firefox 1.0+  var isFirefox = typeof InstallTrigger !== 'undefined';    // Safari 3.0+ "[object HTMLElementConstructor]"   var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function(p) {    return p.toString() === "[object SafariRemoteNotification]";  })(!window['safari'] || safari.pushNotification);    // Internet Explorer 6-11  var isIE = /*@cc_on!@*/ false || !!document.documentMode;    // Edge 20+  var isEdge = !isIE && !!window.StyleMedia;    // Chrome 1+  var isChrome = !!window.chrome && !!window.chrome.webstore;        var position = 0;    // text to anser  var text = 'Inserted Text';    // Just for fun :)  if (isFirefox)    text = "  __ Firefox __ ";  else if (isIE)    text = "  __ IE __ ";  else if (isEdge)    text = "  __ Edge __ ";  else if (isSafari)    text = "  __ Safari __ ";  else if (isOpera)    text = "  __ Opera __ ";  else if (isChrome)    text = "  __ Chrome __ ";    /* Adding text on click based on browser */  jQuery(".addText").on("click", function() {    if (isFirefox) {      // Firefox      var val = jQuery(".textArea").val();        var firstText = val.substring(0, position);      var secondText = val.substring(position);        jQuery(".textArea").val(firstText + text + secondText);    } else {        jQuery(".textArea").focus();      var val = jQuery(".textArea").val();        jQuery(".textArea")[0].selectionStart = position;      jQuery(".textArea")[0].selectionEnd = position;        document.execCommand('insertText', false, text);    }  });    jQuery(".textArea").on("focusout", function(e) {    position = jQuery(this)[0].selectionStart;  });

textarea {    padding: 10px;    font-family: Calibri;    font-size: 18px;    line-height: 1.1;    resize: none;  }  .addText {    padding: 5px 15px;    transition: all 0.5s;    border: 1px solid black;    border-radius: 2px;    background-color: #169c16;    width: 70px;    margin: 10px 0;    color: white;    cursor: pointer;  }  .addText:hover {    background-color: #2776b9;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <textarea name='textArea' class='textArea' rows="7" cols="50">Suspendisse convallis, metus at laoreet congue, sapien dui ornare magna, a porttitor felis purus a ipsum. Morbi vulputate erat rhoncus, luctus neque ut, lacinia orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis    egestas. Fusce aliquam, nulla nec fringilla ultrices, ipsum lectus maximus nisl, ut laoreet purus lectus eget nisl. Duis blandit cursus nulla. Vestibulum consectetur, nunc non viverra condimentum, neque neque tincidunt diam, nec vestibulum neque nisi    ac sem. Integer aliquam a leo id laoreet. Mauris ultrices mauris lorem, eu hendrerit odio volutpat ut. Nam eget hendrerit metus.</textarea>  <div class='addText'>    Add Text  </div>

Tested on:

• FF: 50
• Chrome: 55
• Edge 38
• Safari: 5.1
• Opera: 42

Answer 2

You need to insert the text in a special way so the user can use the normal undo/redo behaviour.

var textEvent = document.createEvent('TextEvent');  textEvent.initTextEvent('textInput', true, true, null, "new text");  document.getElementById("your-textarea").dispatchEvent(textEvent);