JQuery binds to Paste event, how to get paste content

Question

I have a jquery tagken tagit plugin and I want to bind to an insert event in order to correctly add elements.

I can bind to the insert event like this:

.bind("paste", paste_input) 

...

 function paste_input(e) { console.log(e) return false; } 

How to get the actual value of the inserted content?

Answer 1

In modern browsers, the onpaste event is running. You can access the inserted data using the getData function on the clipboardData object.

 $("#textareaid").bind("paste", function(e){ // access the clipboard using the api var pastedData = e.originalEvent.clipboardData.getData('text'); alert(pastedData); } ); 

Note that bind and unbind are deprecated with jQuery 3. The preferred call is on .

All modern browsers support the clipboard API .

See also: In Jquery How to process paste?

Answer 2

How about this: http://jsfiddle.net/5bNx4/

Use .on if you are using jq1.7 and others.

Behavior: When you enter something or paste something in the 1st text box, the tea room below captures the cahnge.

Rest, I hope this helps the cause. :)

Useful link =>

How do you handle oncut, oncopy and onpaste in jQuery?

Insert Insert Insert

the code

 $(document).ready(function() { var $editor = $('#editor'); var $clipboard = $('<textarea />').insertAfter($editor); if(!document.execCommand('StyleWithCSS', false, false)) { document.execCommand('UseCSS', false, true); } $editor.on('paste, keydown', function() { var $self = $(this); setTimeout(function(){ var $content = $self.html(); $clipboard.val($content); },100); }); }); 

Answer 3

Recently, I needed something like that. I used the following design to access the element and meaning of the paste. jsFiddle demo

 $('body').on('paste', 'input, textarea', function (e) { setTimeout(function () { //currentTarget added in jQuery 1.3 alert($(e.currentTarget).val()); //do stuff },0); }); 

Answer 4

Another approach: this input event will also catch the paste event.

 $('textarea').bind('input', function () { setTimeout(function () { console.log('input event handled including paste event'); }, 0); }); 

Answer 5

 $(document).ready(function() { $("#editor").bind('paste', function (e){ $(e.target).keyup(getInput); }); function getInput(e){ var inputText = $(e.target).html(); /*$(e.target).val();*/ alert(inputText); $(e.target).unbind('keyup'); } }); 

Answer 6

You can compare the original field value and the changed field value and subtract the difference as the inserted value. This correctly inserts the embedded text, even if there is existing text in the field.

http://jsfiddle.net/6b7sK/

 function text_diff(first, second) { var start = 0; while (start < first.length && first[start] == second[start]) { ++start; } var end = 0; while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) { ++end; } end = second.length - end; return second.substr(start, end - start); } $('textarea').bind('paste', function () { var self = $(this); var orig = self.val(); setTimeout(function () { var pasted = text_diff(orig, $(self).val()); console.log(pasted); }); }); 

Answer 7

It would seem that if this event has some clipboardData property attached to it (it can be nested in the originalEvent property). clipboardData contains an array of elements, and each of these elements has a getAsString() function that you can call. This returns a string representation of what is in the element.

These elements also have a getAsFile() function, as well as some other browser-specific ones (for example, in webkit browsers, there is a webkitGetAsEntry() function).

For my purposes, I needed the string value of what is being inserted. So, I did something similar to this:

 $(element).bind("paste", function (e) { e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) { debugger; // pStringRepresentation now contains the string representation of what was pasted. // This does not include HTML or any markup. Essentially jQuery $(element).text() // function result. }); }); 

You want to iterate through the elements, preserving the result of concatenating the string.

The fact that there is an array of elements makes me think that it will take more work analyzing each element. You will also want to do some null-value checks.

Answer 8

This work on the entire browser to insert the value. And also to create a common method for the entire text field.

 $("#textareaid").bind("paste", function(e){ var pastedData = e.target.value; alert(pastedData); } ) 

Answer 9

In modern browsers, it's simple: just use the input event along with the inputType attribute:

 $(document).on('input', 'input, textarea', function(e){ if (e.originalEvent.inputType == 'insertFromPaste') { alert($(this).val()); } }); 

https://codepen.io/anon/pen/jJOWxg