Listen to undo/redo event in contenteditable div

Question

Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo.

I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior.

Motla · Accepted Answer · 2020-07-15T10:22:27.437

You can get event.inputType of input event. Check for "historyUndo" / "historyRedo":

var div = document.getElementById("mydiv");
div.addEventListener("input", function(e) {
  switch(e.inputType){
    case "historyUndo": alert("You did undo"); break;
    case "historyRedo": alert("You did redo"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

In recent browsers, you can cancel the event using the beforeinput event (not in Firefox yet):

var div = document.getElementById("mydiv");
div.addEventListener("beforeinput", function(e) {
  switch(e.inputType){
    case "historyUndo": e.preventDefault(); alert("Undo has been canceled"); break;
    case "historyRedo": e.preventDefault(); alert("Redo has been canceled"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

References:

InputEvent specification and other inputType values: https://w3c.github.io/input-events/#interface-InputEvent-Attributes
Browser compatibility for beforeinput: https://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_event

score 1 · Answer 2 · edited Jul 15 '20 at 13:38

1

Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part.

$(document).keydown(function (e) {
    var thisKey = e.which;

    if (e.ctrlKey) {
        if (thisKey == 90) alert('Undo');
        else if (thisKey == 89) alert('Redo');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Jul 15 '20 at 13:38

Maestro

865
1
7
24

answered Nov 10 '12 at 06:32

Korikulum

2,529
21
25

Already implemented the undo functionality in another way, but I thought it'd be cool to be able to do it with ctrl+z. Thanks, mate, worked like a charm. – Drew Dec 12 '13 at 19:58

score -1 · Answer 3 · edited May 23 '17 at 10:28

-1

Control z example at How to detect Ctrl+V, Ctrl+C using JavaScript?

for rightclick you can show a div on a right click How can I capture the right-click event in JavaScript?

then when they click the undo option on the div. just put in a onclick function.

edited May 23 '17 at 10:28

Community

1
1

answered Nov 10 '12 at 06:35

Jared Drake

982
4
12

Listen to undo/redo event in contenteditable div

3 Answers3

Linked