3

This method detects ctrl + v event but I couldnt find how to get the value of it ?

Thanks in advance,

$(".numeric").keydown(function (event) {
    if (event.shiftKey) {
        event.preventDefault();
    }

    switch (event.keyCode) {

        case 86:
            if (event.ctrlKey) { // detects ctrl + v
                var value = $(this).val();
                alert(value); // returns ""
            }
            break;

    }
Barış Velioğlu
  • 5,243
  • 14
  • 54
  • 97

5 Answers5

8

All you have to do it hook into the paste event, let it finish by breaking the callstack and then read the value.

It might seem ugly but it is very crossbrowser friendly and saves you creating a lot of crappy code just to read the actual clipboard.

$(".numeric").bind('paste', function (event) {

  var $this = $(this); //save reference to element for use laster


  setTimeout(function(){ //break the callstack to let the event finish

    alert($this.val()); //read the value of the input field   

  },0); 
});

See it in action here: http://jsfiddle.net/Yqrtb/2/

Update:

Since i just recently had to do something similar, i thought i'd share my final implementation, it goes like this:

$('textarea').on('paste',function(e) {
    //store references for lateer use
    var domTextarea = this,
        txt = domTextarea.value,
        startPos = domTextarea.selectionStart,
        endPos = domTextarea.selectionEnd,
        scrollTop = domTextarea.scrollTop;

    //clear textarea temporarily (user wont notice)
    domTextarea.value = '';

    setTimeout(function () {
        //get pasted value
        var pastedValue = domTextarea.value;

        //do work on pastedValue here, if you need to change/validate it before applying the paste

        //recreate textarea as it would be if we hadn't interupted the paste operation
        domTextarea.value = txt.substring(0, startPos) + pastedValue + txt.substring(endPos, txt.length);
        domTextarea.focus();
        domTextarea.selectionStart = domTextarea.selectionEnd = startPos + pastedValue.length;
        domTextarea.scrollTop = scrollTop;

        //do work on pastedValue here if you simply need to parse its ccontents without modifying it


    }, 0);
});
Martin Jespersen
  • 23,663
  • 6
  • 52
  • 66
  • What do you do when you need to do something with the data before it gets set in the input? – hvgotcodes Oct 01 '11 at 19:05
  • You make a lot of horrible complex code to read the clipboard. Seriously tho, since the broken callstack makes the reading of the data happen less than 1ms after the paste, you can just read it after the fact, set the value to nothing, edit the value and re-set it your self. the user won't be the wiser and you have an easy solution. – Martin Jespersen Oct 01 '11 at 19:10
  • I have made an update fiddle to show you how to modify the input: http://jsfiddle.net/Yqrtb/3/ - from a user experience point of view the change happens before the pasted value is ever inserted into the field. – Martin Jespersen Oct 01 '11 at 19:13
  • +1, Im all for a simple solution that in the end works given the needs. However, this solution kind of masks what is really going on (which could be a bad thing AFA actually understanding how things work), and might not cut if you need to process a large amount of pasted data and do other things in other elements in the UI. – hvgotcodes Oct 01 '11 at 21:14
  • @hvgotcodes: in most cases you can get along with saving the old value in the event handlerand then resetting the input field to that value while you process inside the timeout function. and really - if you need to do big processing on paste you have a user experience problem, since making users wait for a paste to kick in is a good way to make them flee your site – Martin Jespersen Oct 02 '11 at 00:32
  • Is there a way to know where line breaks would have been? – Andy Jones Oct 13 '15 at 12:57
3

It's very much browser dependent. The data is in the event passed to your handler. In safari/chrome, we are listening for the paste event on the input and then doing

event.clipboardData.getData('text/plain')

in the callback and it seems to work ok. You should use your favorite debugger and put a breakpoint into your paste event handler, and look at the event that is passed in.

hvgotcodes
  • 109,621
  • 25
  • 195
  • 231
  • Reading the clipboard across browser platforms is a horrible mess, I highly recommend not doing it, when there are much simpler approaches available. – Martin Jespersen Oct 01 '11 at 18:16
  • -1, I agree with martin... This isn't a very robust method that depends on the users browser. – g19fanatic Oct 01 '11 at 18:32
1

You need a hack. I've detailed one on Stack Overflow a few times before:

Community
  • 1
  • 1
Tim Down
  • 292,637
  • 67
  • 429
  • 506
0

It's very simple, code below works fine, in my case takes text contained on clipboard.

function onPaste(info) {
  var copied = event.view.clipboardData.getData("Text");
  alert(copied);
}

In this case variable called copied contains the value that you need.

Fernando León
  • 1
  • 3
  • You should also show how to it should be implemented, for example teach about `paste` event. – Akxe Aug 02 '17 at 23:48
  • @Akxe You may call method inside your component Or asign method usign jquery: $('yourComponent').on('paste', function () { var copied = event.view.clipboardData.getData("Text"); }); – Fernando León Aug 09 '17 at 22:17
-1

If you need a simple solution with minimal scripting for url link pasting, the solution could be looking at the length of text inserted into a textarea. The code is pretty self explanatory. Basically you look at the length of the textarea value and save the last two changing values. If the difference between the two values is bigger than 5 characters, you assume that the user pasted the text. An average user normally wouldn't press more than five keys at a time, thus removing the unnecessary assumptions.

This solution only works on pasted texts that are longer than 5 characters, which URLs usually are.

var length1 = 0,
    length2 = 0;

$('textarea').keyup(function (e) {
    //save last two inserted values
    length2 = length1;
    length1 = $(this).val().length;
    //check the difference and get the substring
    if (length1 - length2 > 5) {
        alert('Probable Ctrl + V. Pasted text: ' + $(this).val().substring(length1, length2));
    }
});
Jure Majerič
  • 1
  • 1