Browser "Undo" Broken After preventDefault() in Custom Event Handler

[Heretic86]

I think this one ought be pretty easy for the pros...

I have a Text Area that I need to set to use a Custom Event Handler to modify the way that text is pasted.  That all works fine.

function doPasteThingy(e){
  e.preventDefault();

  // Do stuff to get clipboardData and modify it

  document.getElementById('myTextArea').value = modifiedString;
}

document.getElementById('myTextArea').addEventListener('paste', doPasteThingy);

Like I said, this works for what I want it to do.

Now, a "normal" browser feature is to type or paste something in a text input or text area, and you can press CTRL + Z to Undo the last changes.

What is throwing me off is once I do preventDefault and set the value to my modified string, CTRL + Z no longer works, and I am not sure why.  I think it may have something to do with either DOM Mutation, or new CustomEvent?

Any help?

[requinix]

Undo doesn't work to go earlier than that new state? As in you can paste text, then make changes and undo those up to the point where you pasted?

Looks like the answer is document.execCommand. Deprecated, but seems to be still supported by most browsers, and I haven't found an alternative.

[Heretic86]

2 hours ago, requinix said:

Undo doesn't work to go earlier than that new state? As in you can paste text, then make changes and undo those up to the point where you pasted?

Looks like the answer is document.execCommand. Deprecated, but seems to be still supported by most browsers, and I haven't found an alternative.

That was the only thing that I could do that worked as far as Browser Controls go, so I marked this as the "Correct Answer".

Unfortunately, I was not really thrilled with the way the Browser handled it.  Make several changes, use the Browser Undo, and it undoes ALL the text in one foul swoop.  So I wrote my own.  This was necessary because there are too many variations in browser behaviors, and I dont think users would be thrilled with hitting CTRL + Z and have an all or nothing approach, and expect to have that important "something several steps back but they dont know how many".

Requesting a bunch of custom code to handle those steps between is definitely beyond the scope of my request, but it was the only way to have the fine grain control that I thought browsers did a better job with.

I think this goes to show that browsers still have quite a way to go.  For those of you who read this, let this be an important lesson as to the importance of YOUR skills when putting together a decent website that also does "simple" things, like undo stuff in a text box in "stages".  This is how important your skills are.  You make the web a better place when you put in good control systems into your web pages.