如何获取粘贴的textarea输入字段的新值?

我看到,当我尝试从textarea字段中读取其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>

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

  • 将字符串foo复制到剪贴板。
  • 右键单击textarea字段并选择“粘贴”。 div元素中没有显示。
  • 右键单击textarea字段并再次选择“粘贴”。 foo出现在div元素中。
  • 由于我希望div元素始终使用粘贴操作显示textarea元素中已更新的内容,因此在步骤2和步骤3中分别需要的输出为foofoo foo

    我设法得到所需输出的一种方式是通过延迟update()函数调用window.setTimeout() ,所以不是

    textareaElement.onpaste = update    
    

    我有

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

    这次(演示:http://jsfiddle.net/cwpLS/)。 这就是我想要的。 但是,这感觉更像是一种解决方法,而不是一种简单的做我想做的事情的方式。 我想知道是否有任何替代或更好的方法来做到这一点。


    我非常肯定你设置Timeout解决方案是实现理想效果的唯一方法,或者尝试访问剪贴板对象 - 如果您想要支持跨浏览器和旧浏览器,可能会变得杂乱无章。


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

    Mozilla的

    目前没有DOM方法来获取正在粘贴的文本; 你将不得不使用nsIClipboard来获取这些信息。

    也请看看讨论其他可能性的stackoverflow链接。

    链接地址: http://www.djcxy.com/p/10567.html

    上一篇: How to get the new value of a textarea input field on paste?

    下一篇: Ember.js and handlebars each helper, with subviews