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

I see that when I try to read the value from a textarea field when its onpaste function is called, I get the old value of the field (the one before the paste operation), not the new value (the one after the paste operation).

Here is a demonstration of this behaviour: /

A copy of the code follows:

<!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>

You can confirm the behaviour with the following steps.

Copy the string foo to your clipboard.
Right-click on the textarea field and select 'Paste'. Nothing appears in the div element.
Right-click on the textarea field and select 'Paste' again. foo appears in the div element.

Since I want the div element to always show what was updated in the textarea element with the paste operation, the desired output is foo and foo foo in step 2 and step 3 respectively.

One way I have managed to get the desired output is by delaying the update() function call with window.setTimeout(), so instead of

textareaElement.onpaste = update

I have got

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

this time (demo: /). This does what I want. However, this feels more like a workaround rather than a straightforward way of doing what I want. I would like to know if there is any alternate or better way to do this.

Here is a demonstration of this behaviour: http://jsfiddle/qsDnr/

A copy of the code follows:

<!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>

You can confirm the behaviour with the following steps.

Copy the string foo to your clipboard.
Right-click on the textarea field and select 'Paste'. Nothing appears in the div element.
Right-click on the textarea field and select 'Paste' again. foo appears in the div element.

Since I want the div element to always show what was updated in the textarea element with the paste operation, the desired output is foo and foo foo in step 2 and step 3 respectively.

One way I have managed to get the desired output is by delaying the update() function call with window.setTimeout(), so instead of

textareaElement.onpaste = update

I have got

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

this time (demo: http://jsfiddle/cwpLS/). This does what I want. However, this feels more like a workaround rather than a straightforward way of doing what I want. I would like to know if there is any alternate or better way to do this.

Share Improve this question edited May 23, 2015 at 7:09 asked Mar 25, 2012 at 3:53 Susam Pal 34.3k12 gold badges83 silver badges105 bronze badges

This event is sent when the user attempts to paste text - can mean that onpaste is triggered before the text is pasted. – Joseph Commented Mar 25, 2012 at 4:02
event.clipboardData.getData('text/plain') allows to get content, would be pasted, but I'm not sure it is available in every browser and current text and selection should be taken into consideration as well. I'm afraid, you'll need to use timeout or track onkeyup/onmouseup. – kirilloid Commented Mar 25, 2012 at 4:07
@Joseph I agree. I am trying to figure if the problem I am trying to solve is best solved with setTimeOut like I have explained in this post or if there are better ways to solve this problem. – Susam Pal Commented Mar 25, 2012 at 4:08

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

I'm pretty sure that you setTimeout solution is the only way to achieve the desired effect, or try to access the clipboard object - which can get messy if you're going for cross-browser & old browser support.

There is no direct way to do it in cross browser. See the link below about the behaviour in firefox.

Mozilla

There is currently no DOM-only way to obtain the text being pasted; you'll have to use an nsIClipboard to get that information.

Also please have a look at the stackoverflow link which discuss about other possibilities.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get the new value of a textarea input field on paste? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)