如何在Javascript中粘贴事件后提醒？

Question

我有一个简单的过去的事件作为

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

的工作例子可以在这里http://jsfiddle.net/XEQzz/

发现警报和通知粘贴之前就会出现。 我怎样才能延缓后粘贴事件已实际完成的情况发生警报操作？

Answer 1

你可以把你的警报在setTimeout。

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

这会延迟代码，直到值更新。

请记住，setTimeout回调中的this将具有与封闭环境中的值不同的值。

如果你需要外this，这将是该元素，然后在变量引用它的参考...

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

或者使用.bind()（支持在支持addEventListener大多数浏览器。年长的Safari浏览器不支持它。） ...

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

Answer 2

的setTimeout似乎是最好的选择，你可以使用这样的事情来概括

//对象定义

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用法

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

为了更新自己的值

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