Javascript OnPaste

Question

我现在有这个:

<input type="text" placeholder="Paste text" onPaste="alert(this.value);">

这确实有效,除了它返回一个空白警报窗口.我没有任何价值.救命？

Answer 1

将onpaste在之前事件触发input的value改变.你需要一些东西,比如setTimeout:

<input type="text" placeholder="Paste text" onPaste="var e=this; setTimeout(function(){alert(e.value);}, 4);">?

我将一个引用存储this在全局var中,因为this在附加到window对象的timeout函数的范围内是不可访问的.

我使用4毫秒作为超时,因为它是HTML5规范中的最小有效间隔/超时.编辑:如评论中所述,您也可以使用0毫秒作为自动重新计算的timeOut 4.jsPerf测试.

您也可以在onpaste事件内部使用函数调用this作为参数传递,以防止HTML过多地与JS混合.:)

这里的函数更易于阅读,您可以在多个输入中使用:

function pasted(element) {
    setTimeout(function(){
        alert(element.value);
    }, 0); //or 4
}?

只需onPaste="pasted(this)"为任何输入调用即可.

超时可以设置为零 (3认同)
@DmitryScriptin是的它可以,但是在HTML5规范中它将被解释为4,即使你将它设置为0(在jsperf中有一些测试用例来证明这一点),所以我使用了一个有效的数字来防止重新计算.:) (3认同)
我更喜欢"0"作为"排队事件",因为我不必猜测*intent*是什么(它使得代码一致),尽管只是省略*值也应该足够了.对"重新计算"不会产生**性能影响. (2认同)
谢谢@pst，我不太喜欢 HTML 中的内联 JS，因此我也更新了一个新函数。=] (2认同)

Answer 2

这是因为onpaste事件在内容被粘贴到元素(链接)之前触发,所以当你处理它时它还没有.

现代浏览器支持在事件处理程序内获取剪贴板数据的方法.有关跨浏览器解决方案尝试,请参阅JavaScript获取有关粘贴事件(跨浏览器)的剪贴板数据.

此外,您可以通过在事件处理函数(10毫秒应该足够)中启动计时器来解决您的输入值,从而始终解决您的问题.