Javascript OnPaste答案

【问题标题】：Javascript OnPasteJavascript OnPaste
【发布时间】：2012-06-10 22:47:14
【问题描述】：

我现在有这个：

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

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

【问题讨论】：

【解决方案1】：

onpaste 事件在 input 的 value 更改之前触发。你需要像setTimeout这样的东西：

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

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

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

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

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

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

任何输入都可以简单地使用onPaste="pasted(this)" 调用。

【讨论】：

@DmitryScriptin 可以，但是在 HTML5 规范中，即使您将其设置为 0，它也会被解释为 4（jsperf 中有一些测试用例可以证明这一点），所以我使用了有效的数字以防止重新计算。 :)
我更喜欢“0”作为“排队事件”，因为这样我就不必猜测 intent 是什么（这使得代码一致）虽然只需省略值也应该足够了。 “重新计算”不会对性能产生影响。
@pst 两者都将同时被解释，我想这更像是程序员的偏好。我会在下一次编辑时添加它。 :)
@FabrícioMatté 是的。只要说明了这种选择的原因......至少有推理发生，差异除外;-)
谢谢@pst，我不太喜欢 HTML 中的内联 JS，因此我也更新了一个新功能。 =]

【解决方案2】：

这是因为 onpaste 事件在内容被粘贴到元素 (link) 之前触发，因此在您处理它时它还不存在。

现代浏览器支持在事件处理程序中获取剪贴板数据的方法。请参阅JavaScript get clipboard data on paste event (Cross browser) 了解跨浏览器解决方案尝试。

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

【讨论】：