如何在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);
    });

Answer 4

我通常这样做是为了模仿 onafterpaste。

我有一个叫做“onafterpaste”的特殊功能，我像这样使用它：

onpaste="onafterpaste(myFunction, this)"

如您所见，它还接受一个额外的参数，该参数将在调用 myFunction 时使用。

查看（并在其中尝试）以下现场 sn-p：

function onafterpaste(f,elm) {
  setTimeout(function() {f(elm)},0);
}

function  myFunction(elm) {
  alert('After the paste, the input has the following text:\r\n\r\n'+elm.value);
}

<p>Paste something down here:</p>
<input type="text" onpaste="onafterpaste(myFunction,this)" value="The original text">

Answer 5

paste_area 是输入吗？ input 是 also an event。

document.getElementById('paste_area').addEventListener('input', 
    function(event) {
        alert('Pasted');
});