How can I delete text in a textarea in such a way that it gets entered in the native edit history?

Question

I have a sort of mini-app that, amongst other things, manually modifies an input textarea. Simply setting the value (and optionally restoring cursor/scroll position) has one big drawback: it scrambles the edit history. So I use this function for all modifications:

function type(el, str) {
    var e = document.createEvent('TextEvent');
    e.initTextEvent('textInput', true, true, null, str);
    el.dispatchEvent(e);
}

The poor support is OK for my project, and the function works great for inserting text and for replacing it (select the text you want replaced, then call type). But when it's called with an empty string, it does nothing at all.

For some deletions I can work around this by selecting both the text I want to delete and something extra, re-typing the extra bit, then moving the cursor appropriately. But that's impossible if we're deleting everything in the textarea.

So does anybody know of a workaround, or some other way to modify the textarea's value without messing up the edit history?

Answer 1

Instead of passing in an empty string, pass in \0. That seemed to work here. Or you can just detect an empty string like this:

function type(el, str) {
    var e = document.createEvent('TextEvent');
    e.initTextEvent('textInput', true, true, null, str || "\0");
    el.dispatchEvent(e);
}