jquery how to get the pasted content

Question

I have a little trouble catching a pasted text into my input:

 <input type="text" id="myid" val="default">
 $('#myid').on('paste',function(){
        console.log($('#myid').val());
 });  

console.log shows:

default

How I catch the pasted text and get ready to use?

Answer 1

The accepted answer is actually hacky and ugly, seems to be suggested quite often for the paste event on stackoverflow. I think a better way to do it is this

$('#someInput').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.getData('Text');
    //IE9 Equivalent ==> window.clipboardData.getData("Text");   
});

Answer 2

Because the paste event is triggered before the inputs value is updated, the solution is to either:

1. Capture the data from the clipboard instead, as the clipboards data will surely be the same as the data being pasted into the input at that exact moment.

2. Wait until the value has updated using a timer

Luckily, years after the original answer was posted, most modern browsers now support the fantastic Clipboard API, a much more elegant solution to capturing data from the clipboard.

For browsers that don't support the Clipboard API, we could fall back to the unreliable event.clipboardData if we do some checking as to which version, if any, is supported in the browser.

As a final fallback, using a timer to delay until the inputs value is updated, will work in all browsers, making this a truly cross-browser solution.

I've made a convenient function that handles everything

function catchPaste(evt, elem, callback) {
  if (navigator.clipboard && navigator.clipboard.readText) {
    // modern approach with Clipboard API
    navigator.clipboard.readText().then(callback);
  } else if (evt.originalEvent && evt.originalEvent.clipboardData) {
    // OriginalEvent is a property from jQuery, normalizing the event object
    callback(evt.originalEvent.clipboardData.getData('text'));
  } else if (evt.clipboardData) {
    // used in some browsers for clipboardData
    callback(evt.clipboardData.getData('text/plain'));
  } else if (window.clipboardData) {
    // Older clipboardData version for Internet Explorer only
    callback(window.clipboardData.getData('Text'));
  } else {
    // Last resort fallback, using a timer
    setTimeout(function() {
      callback(elem.value)
    }, 100);
  }
}

// to be used as 

$('#myid').on('paste', function(evt) {
  catchPaste(evt, this, function(clipData) {
    console.log(clipData);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myid" />

Note that getting the data from the clipboard only gets you the pasted text, while waiting for the inputs value to update is the only solution above that actually gets the entire value of the input, including the newly pasted text.

Answer 3

using "input" avoids the Timeout kludge on paste and is better than change which can not work for things like paste or search events.

$('input').on('input', function(e) {
    var type = e.originalEvent.inputType;
    if (typeof(type) == 'undefined'){
       type = 'search';
    switch(type){
    case 'search':
    case 'deleteByCut':
    case 'insertText':
    case 'insertFromPaste':
    case 'deleteContentBackward':
       var content = $(this).val();
    }
});

Search is a special case which doesnt generate an input type; it's basically the same as 'deleteByCut' in function in that it clears the field.

You could, of course, have different handlers for each case if necessary.

Answer 4

$('#myid').on('paste' , function(e){
   get_content(this);
});

function get_content(gelen){
var value_input = $(gelen).val();
document.getElementById("write-value").innerHTML = value_input;
console.log(value_input);
}

input{ width: calc(100% - 16px); padding:8px; font-size:large}
div{ color:red; margin-top:16px; padding:8px; font-size:large}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myid" onkeyUP="get_content(this)" >

<div id="write-value">
</div>

Answer 5

JSfiddle EXAMPLE here

Bigger picture, I think you usually want three events:

1. When the user pastes
2. When the user hits <enter>
3. When the textbox looses focus.

I DON'T want on('input') because that raises an event for every keypress.

This way, you get one event, when the user gets done making input to the text box.

$(document).ready(function () {

            $('#myid').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    alert($(this).val());
                }
            }).on("change", function () {
                alert($(this).val());
            }).on("paste", function (e) {
                var _this = this;
                // Short pause to wait for paste to complete
                setTimeout(function () {
                    alert($(_this).val());
                }, 100);
            });
        });

Answer 6

Try this or adding a timeOut too:

   $('#myid').on('paste',function(){
           console.log(this.value);
    });