How can I modify pasted text?

Question

Is it possible to intercept and modify text that gets pasted into a textarea?

If intercepting isn't possible, can I modify it after being pasted? (Without modifying the already present text in the textarea.)

@Adrian: My question is more about if it's even possible, therefore you can assume any library you want. — Georg Schölly, Sep 04 '10 at 07:48

score 1 · Answer 1 · answered Sep 03 '10 at 23:29

1

Maybe intercept keypresses, to know when CTRL+C is pressed, cache current text, then at CTRL+C's keyup, check current value against cached one, with simple text processing you can know the new text, and do whatever you want with, and update accordingly.

answered Sep 03 '10 at 23:29

aularon

11,042
3
36
41

I'm not certain this works with all browsers, but is definitely a better approach I think. http://api.jquery.com/keypress/ – userx Sep 04 '10 at 03:39

score 1 · Accepted Answer · answered Sep 04 '10 at 01:16

1

With jQuery:

    jQuery(function($){
      $('#your_element').bind('paste', function(event){
        event.preventDefault();
        var clipboardData = event.originalEvent.clipboardData.getData('text/plain');
        console.log(clipboardData);
      }); 
     }      
    });

Works in IE and Webkit. With Firefox you might have to use this:

http://intridea.com/2007/12/16/faking-onpaste-in-firefox?blog=company

answered Sep 04 '10 at 01:16

Carlos

840
1
7
7

Actually the onpaste event worked in Gecko 1.9.0.19 (Camino 2.0.4). I think it has been introduced in Firefox 3, here's the mozilla page: https://developer.mozilla.org/en/DOM/element.onpaste There is, however, no good way to get the pasted data. – Georg Schölly Sep 04 '10 at 08:48
Ah, thanks didn't know that Firefox 3 implemented onpaste, but it sucks that you can't get to the data with it. – Carlos Sep 04 '10 at 16:20
23

And where is information about **modyfing** the data? – Mike Feb 09 '17 at 01:28
This is not answer to asked question. This is correct answer: https://stackoverflow.com/questions/43438665/how-to-modify-pasted-data-jquery – Jeffz Aug 30 '17 at 16:12

score 0 · Answer 3 · answered Sep 04 '10 at 01:11

The best way I know of how to do this is to wait for the content to the text field to be pasted then wait for a keyup or a keydown trigger. This is shown in the code below:

<script language="javascript">

function testfunction()
{

 // This function will execute whenever the content of 

}
</script>

<textarea onkeyup="testfunction()" onkeydown="testfunction()"></textarea>

If you want to monitor a textarea for any changes, the following code would do that. It checks the value of the textarea every 1/10th of a second for any updates.

<textarea id="testfield"></textarea>

<script language="javascript">

var textarea = document.getElementById('testfield');
var textval = '';

function monitor()
{

 if(textval != textarea.value)
 {

  textval = textarea.value;
  testfunction();

 }

 setTimeout('monitor()', 100);

}

function testfunction()
{

 // This function will get executed whenever the value of the text area is altered (at most within 1/10th of a second)

}

monitor();
</script>

In both cases, you can modify the value of the textarea when testfunction() then update the value of the textarea with the updated value.

Consider using "setTimeout(monitor, 100);" instead of "setTimeout('monitor()', 100);". Eval is evil :) — userx, Sep 04 '10 at 03:37

How can I modify pasted text?

3 Answers3

Linked