如何在javascript中处理undo / redo事件？ [英] How to handle undo/redo event in javascript?

问题描述

我正在尝试使用Javascript& amp;来检测表单输入的值是否发生变化JQuery的。不幸的是，我发现JQuery的 $（elem）.change（）不足，因为它只会在 elem 丢失时触发更改事件焦点。当表单输入值发生变化时，我必须立即知道。为此，我将与输入值可能更改相关的事件缩小到 keyup ，粘贴， cut ，撤消和重做。但是，javascript和JQuery似乎都没有办法处理撤销或重做。

I'm trying to detect whenever a form input's value changes using Javascript & JQuery. Unfortunately, I find JQuery's $(elem).change() insufficient because it only fires the change event when elem loses focus. I have to immediately know when there are changes in the form input's value. To this end, I've narrowed down events associated with a possible change in an input's value to keyup, paste, cut, undo, and redo. However, neither javascript nor JQuery seem to have a way of dealing with undo or redo.

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中搜索了undo / redo事件，但没有找到任何有用的信息。有人可以帮忙解决如何处理撤消/重做事件吗？

I've googled for undo/redo event in Javascript/JQuery but didn't find anything helpful. Can someone help on how to deal with undo/redo events?

推荐答案

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

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.

如果你想要捕获所有可能的输入控件可以更改的方式，以便您可以立即看到这样的更改，然后查看此示例代码： http://jsfiddle.net/jfriend00/6qyS6/ 实现了输入控件的更改回调。此代码不是直接设计用于下拉列表，但由于它是输入控件的一种形式，您可以调整此代码以创建自己的下拉变换事件。

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.

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

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

这篇关于如何在javascript中处理undo / redo事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！