javascript - How to bind paste event in keyboard and mouse? - Stack Overflow

admin管理员组

文章数量:1321445

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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 7, 2015 at 12:09 Lucky 17.4k1919 gold badges120120 silver badges156156 bronze badges asked Apr 2, 2013 at 6:34 Ravi KavaiyaRavi Kavaiya 84966 silver badges1616 bronze badges 5

• 2 Is it past event or paste event? – Antony Commented Apr 2, 2013 at 6:38
• i need to bind with paste event and ctrl+v . – Ravi Kavaiya Commented Apr 2, 2013 at 6:39
• Have a look at this stackoverflow./questions/11605415/… – MattP Commented Apr 2, 2013 at 6:44
• Mattp : yes i tried it but it's not working right – Ravi Kavaiya Commented Apr 2, 2013 at 6:48
• have a look at this text2clipboard./demo.php – Lucky Commented Apr 2, 2013 at 7:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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."></input>
  <button class="js-textinputcopybtn">Copy Text Input</button>
</p>

<p>
    <textarea class="js-copytextarea">http://www.stackexchange.</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 mand 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 mand 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 mand was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }
  });

});

http://www.stackoverflow.http://www.stackexchange.http://www.stackoverflow.http://www.stackexchange.

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

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

Hope this helps..

$(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');
    }
});

本文标签： javascriptHow to bind paste event in keyboard and mouseStack Overflow