Jak alarmować po wklejeniu zdarzenia w JavaScript?

Question

Mam proste przeszłe wydarzenie jako

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

przykład roboczych można znaleźć tutaj http://jsfiddle.net/XEQzz/

woli stawienia się przed wklejeniem alarm i ostrzeżenie. Jak mogę opóźnić działanie alertu po zakończeniu wklejania zdarzenia?

Answer 1

Możesz umieścić swój alert w numerze setTimeout.

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

Spowoduje to opóźnienie kodu do momentu aktualizacji wartości.

Należy pamiętać, że this w wywołaniu zwrotnym setTimeout ma inną wartość niż w środowisku otaczającym.

Jeśli musisz odniesienie do zewnętrznej this, który będzie elementem, następnie odwołać go w zmiennej ...

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

lub użyj .bind()(Obsługiwane w większości przeglądarek, które wspierają addEventListener . Starsze Safari nie obsługuje.) ...

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

Answer 2

setTimeout wydaje się najlepszym rozwiązaniem i można użyć mniej więcej tak uogólniać

// obiekt definicja

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 Wykorzystanie

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

Answer 3

Do aktualizacji własnej wartości

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