How to bind paste event in keyboard and mouse?

Question

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?

Answer 1

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..