如何在javascript中处理撤消/重做事件？

Question

我正在尝试使用 Javascript 和 JQuery 检测表单输入的值何时发生变化。不幸的是，我发现 JQuery 是$(elem).change()不够的，因为它只在elem失去焦点时触发更改事件。我必须立即知道表单输入值何时发生变化。为此，我将与输入值可能更改相关的事件范围缩小到keyup、paste、cut、undo和redo。但是，javascript 和 JQuery 似乎都没有处理撤消或重做的方法。

var onChange = function ()
{
    alert('Checking for changes...');
};

$(this).off('keyup').on('keyup', onChange);
$(this).off('paste').on('paste', onChange);
$(this).off('cut').on('cut', onChange);

$(this).off('undo').on('undo', onChange);  // undo ?
$(this).off('redo').on('redo', onChange);  // redo ?

我在 Javascript/JQuery 中搜索了撤消/重做事件，但没有找到任何有用的信息。有人可以帮助处理撤消/重做事件吗？

Answer 1

javascript 中没有撤消或重做事件。如果你想要这样的功能，你要么自己用 javascript 编写它，要么找到一个提供这种功能的库。

如果您试图捕获可以更改输入控件的所有可能方式，以便您可以立即看到此类更改，请查看此示例代码：http : //jsfiddle.net/jfriend00/6qyS6/，它实现了更改输入控件的回调。这段代码不是直接为下拉菜单设计的，但由于它是输入控件的一种形式，您可能可以修改此代码为下拉菜单创建自己的更改事件。

好吧，StackOverflow 以其无限的智慧禁止我仅发布对 jsFiddle 的引用，因此我必须将所有代码粘贴到此处（出于某种原因，jsFiddles 被挑出来而不是其他网络引用）。我并不是将其表示为一个精确的解决方案，而是作为一个模板，您可以使用它来检测用户对输入控件的更改：

(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 + ")");
});

Answer 2

您可以使用 MutationObserver 监控所有更改。这不会为每个 keydown 和 keyup 提供事件，但它可以合并多个更改并将其作为单个事件发送给您。

  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 
   });

有关 MutationObserver 的更多信息 https://developer.mozilla.org/en/docs/Web/API/MutationObserver