如何在键盘和鼠标中绑定粘贴事件？

Question

我有三个文本框和按钮，它包含一个唯一的URL。当点击复制按钮，它应该复制特定的文本框的值，我需要绑定与Ctrl + v和鼠标右键单击并通过jQuery或JavaScript函数粘贴事件。

当我专注于浏览器地址栏中光标，当我使用按Ctrl +v或right click and paste go事件应该粘贴文本复制网址并进入特定的URL。

那么如何在jQuery/javascript中单击复制按钮后粘贴粘贴事件？

Answer 1

检查此FIDDLE如何在输入和textarea中做到这一点。鼠标和键盘事件都受支持。

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

来源：Snippet from the answer provided by Dean Taylor with little modifications

您可以绑定复制粘贴和剪切事件的jQuery这样，

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

检查此Fiddle通过jQuery绑定复制，剪切和粘贴事件。

• 键和鼠标事件都被剪切，复制和粘贴。

$(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>

希望这有助于..

Answer 2

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