如何在粘贴时获得文本区域输入字段的新值

How to get the new value of a textarea input field on paste?

本文关键字：区域 文本 输入 字段 新值      更新时间：2023-09-26

我看到，当我试图在调用文本区域字段的onpaste函数时从该字段读取值时，我得到的是该字段的旧值（粘贴操作之前的值），而不是新值（粘贴操作之后的值）。

以下是这种行为的示例：http://jsfiddle.net/qsDnr/

代码副本如下：

<!DOCTYPE html>
<html>
<head>
<title>On Paste</title>
<script type="text/javascript">
var textareaElement;
var previewElement;
function update()
{
    previewElement.innerHTML = textareaElement.value;
}
window.onload = function() {
    textareaElement = document.getElementById('textarea');
    previewElement = document.getElementById('preview');
    textareaElement.onpaste = update    
}
</script>
</head>
<body>
<textarea id="textarea">
</textarea>
<div id="preview">
</div>
</body>
</html>

您可以通过以下步骤确认行为。

  1. 将字符串foo复制到剪贴板
  2. 右键单击文本区域字段，然后选择"粘贴"。div元素中没有显示任何内容
  3. 右键单击文本区域字段，然后再次选择"粘贴"。foo出现在div元素中

由于我希望div元素始终显示粘贴操作在textarea元素中更新的内容，因此在步骤2和步骤3中，所需的输出分别为foo和foo foo。

我设法获得所需输出的一种方法是用window.setTimeout()延迟update()函数调用，因此不用

textareaElement.onpaste = update

我有

textareaElement.onpaste = function() {
    window.setTimeout(update, 100);
};

这次（演示：http://jsfiddle.net/cwpLS/)。这是我想要的。然而，这感觉更像是一种变通方法，而不是一种简单的方式来做我想做的事情。我想知道是否有其他更好的方法。

我很确定，设置Timeout解决方案是实现所需效果的唯一方法，或者尝试访问剪贴板对象-如果你要跨浏览器&旧的浏览器支持。

在跨浏览器中没有直接的方法。请参阅下面关于firefox中行为的链接。

Mozilla

目前还没有DOM唯一的方法来获取正在粘贴的文本；你必须使用nsIClipboard才能获得这些信息。

此外，请查看stackoverflow链接，其中讨论了其他可能性。

相关文章：