javascript – 如何在粘贴时获取textarea输入字段的新值?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在粘贴时获取textarea输入字段的新值?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看到当我在调用onpaste函数时尝试从textarea字段读取值时,我得到字段的旧值(粘贴操作之前的那个),而不是新值(粘贴操作之后的那个) .

以下是此行为的演示: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中的foo和foo foo.

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

textareaElement.onpaste = update

我有

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

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

解决方法

我很确定你setTimeout解决方案是实现所需效果的唯一方法,或者尝试访问剪贴板对象 – 如果你要使用跨浏览器和放大器,这可能会变得混乱.旧的浏览器支持.

猜你在找的JavaScript相关文章