How To Handle Undo/redo Event In Javascript?
Solution 1:
There is no undo or redo event in javascript. If you wanted such functionality, you'd either have to write it yourself in javascript or find a library that offered such functionality.
If you're trying to trap all possible ways that an input control can be changed so you can see such a change immediately, then take a look at this sample code: http://jsfiddle.net/jfriend00/6qyS6/ which implemented a change callback for an input control. This code wasn't designed directly for a drop-down, but since it's a form of an input control, you can probably adapt this code to create your own change event for a drop-down.
Well, StackOverflow in their infinite wisdom is prohibiting me from posting just a reference to a jsFiddle so I have to paste all the code in here (for some reason, jsFiddles are singled out as opposed to other web references). I'm not representing this as an exact solution, but as a template you could use for how to detect user changes to an input control:
(function($) {
var isIE = false;
// conditional compilation which tells us if this is IE
/*@cc_on
isIE = true;
@*/
// Events to monitor if 'input' event is not supported
// The boolean value is whether we have to
// re-check after the event with a setTimeout()
var events = [
"keyup", false,
"blur", false,
"focus", false,
"drop", true,
"change", false,
"input", false,
"textInput", false,
"paste", true,
"cut", true,
"copy", true,
"contextmenu", true
];
// Test if the input event is supported
// It's too buggy in IE so we never rely on it in IE
if (!isIE) {
var el = document.createElement("input");
var gotInput = ("oninput" in el);
if (!gotInput) {
el.setAttribute("oninput", 'return;');
gotInput = typeof el["oninput"] == 'function';
}
el = null;
// if 'input' event is supported, then use a smaller
// set of events
if (gotInput) {
events = [
"input", false,
"textInput", false
];
}
}
$.fn.userChange = function(fn, data) {
function checkNotify(e, delay) {
// debugging code
if ($("#logAll").prop("checked")) {
log('checkNotify - ' + e.type);
}
var self = this;
var this$ = $(this);
if (this.value !== this$.data("priorValue")) {
this$.data("priorValue", this.value);
fn.call(this, e, data);
} else if (delay) {
// The actual data change happens after some events
// so we queue a check for after.
// We need a copy of e for setTimeout() because the real e
// may be overwritten before the setTimeout() fires
var eCopy = $.extend({}, e);
setTimeout(function() {checkNotify.call(self, eCopy, false)}, 1);
}
}
// hook up event handlers for each item in this jQuery object
// and remember initial value
this.each(function() {
var this$ = $(this).data("priorValue", this.value);
for (var i = 0; i < events.length; i+=2) {
(function(i) {
this$.on(events[i], function(e) {
checkNotify.call(this, e, events[i+1]);
});
})(i);
}
});
}
})(jQuery);
function log(x) {
jQuery("#log").append("<div>" + x + "</div>");
}
// hook up our test engine
$("#clear").click(function() {
$("#log").html("");
});
$("#container input").userChange(function(e) {
log("change - " + e.type + " (" + this.value + ")");
});
Solution 2:
You can monitor all the changes using MutationObserver. This won't give you event for every keydown and keyup, but it kind of consolidate multiple changes and give it out to you as single event.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// mutation.target will give you element which has been modified.
// mutation.addedNodes and mutation.removedNodes will give you operations that were performed on the node
// happy coding :)
});
});
observer.observe(elementsToMonitor, {
attributes: true,
childList: true,
characterData: true
});
More info about MutationObserver https://developer.mozilla.org/en/docs/Web/API/MutationObserver
Solution 3:
Hot Keys by John Resig (Creator of JQuery) may help
https://github.com/jeresig/jquery.hotkeys
From the readme file
If you want to use more than one modifiers (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. alt+ctrl+shift
Solution 4:
<input type="text"/>
<script>
var newInput = "";
var oldInput = [$('input').val()];
$('input').on('input',function(){
newInput = $(this).val();
redo = false;
$(oldInput).each(function(i){if(newInput==oldInput[i]){redo = true; return false});
if(redo){
console.log('do code for an undo or redo');
}
oldInput.push(newInput);
console.log([oldInput,newInput]);
});
</script>
The basic concept is to store previous input values and check if the new input value equals one of those previous ones. It's not perfect (e.g. a backspace triggers it) and a little inefficient (see next paragraph), but you should be able to get your desired results.
Instead of keeping all previous inputs, you could look at the code for undo to see what it actually keeps (I think it just keeps most inputs as lost as they are within a timeframe of each other).
Solution 5:
There was a time when I needed something like this in a project I was working on. The marked solution didn't seem that elegant to me to get the result. I used a combination of a couple of things answered here to do it.
function UndoListener(options){
if(!options.el instanceof HTMLElement) return;
this.el = options.el;
this.callback = options.callback || function(){};
this.expectedChange = false;
this.init();
}
UndoListener.prototype = {
constructor: UndoListener,
addListeners: function(){
this.el.addEventListener('keydown', (e) => this.expectedChange = this.eventChecker(e));
this.el.addEventListener('cut', (e) => this.expectedChange = true);
this.el.addEventListener('paste', (e) => this.expectedChange = true);
},
addObserver: function(){
this.observer = new MutationObserver((mt) => {
if(!this.expectedChange){
this.expectedChange = true;
this.observer.disconnect();
this.callback.call(this.el, {
original: [...mt].shift().oldValue,
current: this.el.innerText
});
this.addObserver();
}
this.expectedChange = false;
});
this.observer.observe(this.el, {
characterData: true,
subtree: true,
characterDataOldValue: true
});
},
eventChecker: function(event) {
return !(~['z','y'].indexOf(event.key) && (event.ctrlKey || event.metaKey));
},
init: function(){
this.addListeners();
this.addObserver();
}
}
This uses MutationObserver to "catch" undo events. It does this because MutationObserver fires after events fire. We check if the event was an expected event, like keydown or cut and allow the change to occur without the callback firing. If the event was unexpected, we assume an undo has occurred. This cannot differentiate between undo and redo; the callback will fire on either. Usage:
var catcher = new UndoListener({
el: document.querySelector('.container'),
callback: function(val){
console.log('callback fired', val);
}
});
I have this working in action on codepen.
Post a Comment for "How To Handle Undo/redo Event In Javascript?"