如何在鍵盤和鼠標中綁定粘貼事件？

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