How to bind paste event in keyboard and mouse?

Question

textbox

I have three textbox and button which contains a unique URL. When clicking on copy button, it should copy the particular textbox value and I need to bind with Ctrl+v and mouse right click and paste event via jQuery or javascript function.

When I focus the cursor in browser address bar and when I use Ctrl+v or right click and paste go event it should paste the copied url from textbox and go to particular URL.

So how can I bind paste event in jQuery/javascript after clicking copy button?

Have a look at this http://stackoverflow.com/questions/11605415/jquery-bind-to-paste-event-how-to-get-the-content-of-the-paste — MattP, Apr 02 '13 at 06:44

score 4 · Accepted Answer · edited May 23 '17 at 12:31

Check this FIDDLE on how to do this in a input and textarea. Both mouse and keyboard events are supported.

HTML:

<p>
  <input class="js-copytextinput" value="http://www.stackoverflow.com"></input>
  <button class="js-textinputcopybtn">Copy Text Input</button>
</p>

<p>
    <textarea class="js-copytextarea">http://www.stackexchange.com</textarea>
  <button class="js-textareacopybtn">Copy Textarea</button>
</p>

JS:

//textinput copy
    var copyTextinputBtn = document.querySelector('.js-textinputcopybtn');

    copyTextinputBtn.addEventListener('click', function(event) {
        var copyTextinput = document.querySelector('.js-copytextinput');
        copyTextinput.select();

        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text input command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });

Source: Snippet from the answer provided by Dean Taylor with little modifications

You can bind the copy paste and cut events in jQuery like this,

$(".select").bind({
    copy : function(){
        $('span').text('copy behaviour detected!');
    },
    paste : function(){
        $('span').text('paste behaviour detected!');
    },
    cut : function(){
        $('span').text('cut behaviour detected!');
    }
});

Check this Fiddle on binding the copy, cut and paste events via jQuery.

Both the key and mouse events are bound in the cut, copy and paste.

$(document).ready(function() {
  //textinput copy
  var copyTextinputBtn = document.querySelector('.js-textinputcopybtn');

  copyTextinputBtn.addEventListener('click', function(event) {
    var copyTextinput = document.querySelector('.js-copytextinput');
    copyTextinput.select();

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copying text input command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  });

  //textarea copy
  var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

  copyTextareaBtn.addEventListener('click', function(event) {
    var copyTextarea = document.querySelector('.js-copytextarea');
    copyTextarea.select();

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copying text area command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  });

});

http://www.stackoverflow.comhttp://www.stackexchange.comhttp://www.stackoverflow.comhttp://www.stackexchange.com

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input class="js-copytextinput" value="http://www.stackoverflow.com"></input>
  <button class="js-textinputcopybtn">Copy Text Input</button>
</p>

<p>
  <textarea class="js-copytextarea">http://www.stackexchange.com</textarea>
  <button class="js-textareacopybtn">Copy Textarea</button>
</p>

Hope this helps..

thanks for you answer but what i want , when click on copy button copy text which content one unique URL and when cursor focusing in browser address bar that time i wanna paste copy URL in browser address bar via ctrl+v and mouse event . — Ravi Kavaiya, Apr 02 '13 at 09:07
@RaviKavaiya Just try the jsfiddle in my answer. All the events you can capture using the jquery bind events. Both mouse and keyboards action are recorded. ;) — Lucky, Aug 07 '15 at 09:49

score 0 · Answer 2 · answered Apr 04 '14 at 07:36

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).html();
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

How to bind paste event in keyboard and mouse?

2 Answers2