Wie warne ich nach dem Einfügen eines Events in Javascript?

Ich habe ein einfaches Ereignis der Vergangenheit als

document.getElementById('paste_area').addEventListener('paste', function() {
    document.getElementById('notice').innerHTML='Text was successfully pasted!';
    alert('Pasted');
}, true);

Als ein Beispiel können hier gefunden werden http://jsfiddle.net/XEQzz/

Die Warnung und Hinweis angezeigt, bevor Sie einfügen. Wie kann ich die Verzögerung der Alarm-Aktion geschehen nach dem einfügen Ereignis wurde eigentlich abgeschlossen?

InformationsquelleAutor der Frage Googlebot | 2012-12-15

  1. 25

    Könnten Sie setzen Ihre Warnung in einem setTimeout.

    setTimeout(function() {alert('Pasted');}, 0);

    Dies verzögert den code erst, nachdem der Wert aktualisiert wurde.

    Nur im Hinterkopf behalten, dass this im setTimeout callback wird ein anderer Wert als die in der einschließenden Umgebung.

    Wenn Sie müssen einen Verweis auf die äußere thisdie das element, verweisen dann in eine variable...

    var self = this;
setTimeout(function() {alert(self.value);}, 0);

    Oder verwenden Sie .bind() (Unterstützt die meisten Browser unterstützen addEventListener. Ältere Safari nicht unterstützt.)...

    setTimeout(function() {alert(this.value);}.bind(this), 0);

    InformationsquelleAutor der Antwort I Hate Lazy

  2. 3

    setTimeout scheint die beste option, und Sie können so etwas wie dies zu verallgemeinern,

    //Objekt definition

        function PasteMonitor(element)
    {
        if(typeof element == "string")
        {
            this.target = document.getElementById(element);
        }
        else if(typeof element == "object" || typeof element == "function")
        {
            this.target = element;
        }

        if(this.target != null && this.target != undefined)
        {
            this.target.addEventListener('paste',this.inPaste.bind(this),false);
            this.target.addEventListener('change',this.changed.bind(this),false);
        }
        this.oldstate = "";
    }
    PasteMonitor.prototype = Object.create({},{
        pasted:{ value: false, enumerable: true, configurable: true, writable: true },
        changed:{ value: function(evt){
            //elements content is changed
            if(typeof this.onChange == "function")
            {
                this.onChange(evt);
            }
            if(this.pasted)
            {
                if(typeof this.afterPaste == "function")
                {
                    this.afterPaste(evt);
                    this.pasted = false;
                }
            }
        }, enumerable: true, configurable: true, writable: true },
        inPaste:{ value: function(evt){
            var cancelPaste = false;
            if(typeof this.beforePaste == "function")
            {
                //process pasted data
                cancelPaste = this.beforePaste(evt);
            }
            if(cancelPaste == true)
            {
                evt.preventDefault();
                return false;
            }
            this.pasted = true;
            setTimeout(function(){
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("change", false, true);
                this.target.dispatchEvent(evt);
            }.bind(this),0);
        }, enumerable: true, configurable: true, writable: true }
    })
    PasteMonitor.prototype.constructor = PasteMonitor;

    //PasteMonitor Nutzung 

        //var element = document.getElementById('paste_area');
    var msgArea = document.getElementById('message');
    var myMonitor = new PasteMonitor("paste_area");
    //or use and object as argument => var myMonitor = new PasteMonitor(element);

    myMonitor.onChange = function(evt){
        if(this.pasted)
        {
            //do something on paste change
            msgArea.innerHTML = "onChange by paste";
            this.oldstate = this.target.value;
        }
        //check to prevent processing change event when the element loses focus if the change is done by paste
        else if(this.target.value != this.oldstate)
        {
            msgArea.innerHTML = "onChange by typing";
        }
    };
    myMonitor.afterPaste = function(evt){
       //do something after paste
        msgArea.innerHTML = "afterPaste";
    };
    myMonitor.beforePaste = function(evt){
        //do something before the actual paste
        msgArea.innerHTML = "beforePaste";
        //return true to prevent paste
        return false;
    };

    InformationsquelleAutor der Antwort Atlantrix

  3. 0

    Für die Aktualisierung der eigenen Wert

     $(".number").on("paste", function (e) {
        var Value = e.originalEvent.clipboardData.getData('text');
        var Self=this
        setTimeout(function () {
            if (Value != Value.replace(/[^\d\.]/g, "")) {
                $(Self).val(Value.replace(/[^\d\.]/g, ""));
            }
        }, 0);
    });

    InformationsquelleAutor der Antwort VISHMAY

Schreibe einen Kommentar