Jump to content

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


Heretic86
 Share

Go to solution Solved by requinix,

Recommended Posts

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?

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.