Javascript OnPaste

Javascript OnPaste

本文关键字：OnPaste Javascript      更新时间：2023-09-26

我现在有这个：

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

这确实有效，除了它返回一个空白的警报窗口。我没有得到任何价值。帮助？

onpaste事件在更改input的value之前触发。您需要诸如setTimeout之类的东西：

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

我将对this的引用存储在全局变量中，因为this在附加到窗口对象的超时函数的作用域内无法访问。

我使用 4 毫秒作为超时，因为它是 HTML5 规范中的最小有效间隔/超时。编辑：如注释中所述，您还可以使用 0 毫秒作为超时，它会自动重新计算为 4 。jsPerf tests.

小提琴

您也可以在onpaste事件中使用函数调用，将this作为参数传递，以防止 HTML 与 JS 过多混合。 :)

这里有一个更易于阅读的函数，您可以在多个输入中使用：

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

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

小提琴

这是因为onpaste事件在内容粘贴到元素（链接）之前触发，因此在您处理它时它还不存在。

现代浏览器支持在事件处理程序中获取剪贴板数据的方法。有关跨浏览器解决方案尝试，请参阅 JavaScript 在粘贴事件（跨浏览器）上获取剪贴板数据。

此外，您始终可以通过在事件处理程序函数中启动一个计时器（10ms 应该足够）来解决问题，该计时器稍后会检查您的输入值。

相关文章：