In Chrome undo does not work properly for input element after contents changed programmatically

Question

In Chrome, I noticed that undo does not work properly for input element after the contents of the element has been changed programmatically. Although I get different behavio

Answer 1

Chrome doesn't store the field's states, but rather a diff or set of deltas for each undo/redo. It takes less memory, but causes the bug you're dealing with.

You can effectively simulate the user pasting a value into the field by using document.execCommand("insertText", false, "text to insert");.

For your particular case:

1. First, save the field's value to a variable. var temp = caller.value;
2. Next, clear the field's value or set its selectionStart to 0 and selectionEnd to the field's length. This way a simulated paste replaces the field's contents.
3. Next, make sure the field has the focus. caller.focus();
4. Finally, simulate the user pasting in the modified value. document.execCommand("insertText", false, temp.trim());

I found this solution in another SO question, https://stackoverflow.com/a/10345596/1021426