Disable Undo and Redo in browsers

Question

I would like to disable undo and redo in all browsers using JavaScript. I want to do this as our app has it's own undo and redo history built in.

I can already handle key presses to disable undo and redo via a keyboard entry but I would like to disable the menu items as well. (Standard menu and right click menu)

Is this possible? Even if it is only possible in some browsers it would be better than none.

Apotropaic

The only way I'd know would be to detect a change in a field and check if it was not caused by keyboard input, cut/paste, or your own scripts, then assume that it was the undo/redo function that did so. As far as I am aware, there is no working event handler to catch undo/redo events, so (if you really need it) this might be the only option. – Alfonso

Answer 1

I know this is old, but for others that are curious, this worked for me.

$(window).bind('keydown', function(evt) { 
  if((evt.ctrlKey || evt.metaKey) && String.fromCharCode(evt.which).toLowerCase() == 'z') {
    evt.preventDefault();
  }
});

Suilmann

Does this really "disable the menu items as well. (Standard menu and right click menu)"? i.e. does it block the "Undo" option in the mouse right-button click context menu? – Extravagancy

Yeah, you'd also likely also want to disable the context menu. However, I'm still curious as to how do you'd stop propagation of the event when the user navigates to the application menu's Edit -> Undo option? – Palette

In addition to Ctrl-z the Ctrl-Shift-z and Ctrl-y combos should be caught – Marionmarionette

Answer 2

One thing you can do is intercept the popstate event. Unfortunately i don't think it can be canceled, so you have to hack it up a bit by adding a dummy state to undo to.

The following code prevented me from pressing back on Chrome and FF. Feel free to test it on other browsers.

window.setTimeout(function(){
  window.history.pushState({}, '', '#');
  window.addEventListener("popstate", function() {
    window.history.pushState({}, '', '#');
  });
},1000);

Make sure to change your code as appropriate to fit in with your own history. Also consider using the HTML5 History API instead of your own history implementation.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Halfwit

I don't believe this question is asking about altering the history's state, but rather relates to undo/redo in a contentEditable element. – Palette

Answer 3

it is not possible using browser apis. but there is a few ways to detect or handling methods. url hashing is a one way to handling back or forward event. however browsers not support this for user safety. you can search javascript url hashing scripts but do not forget about that scripts compatible with html5 browsers.

Ethology