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

Question

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

当我将光标聚焦在浏览器地址栏中并且当我使用Ctrl+v或right click and paste go事件时，它应该从文本框中粘贴复制的 url 并转到特定的 URL。

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

Answer 1

检查这个FIDDLE如何在输入和文本区域中执行此操作。支持鼠标和键盘事件。

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

资料来源：来自 Dean Taylor 提供的答案的片段，几乎没有修改

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

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

在通过 jQuery 绑定复制、剪切和粘贴事件时检查这个Fiddle。

• 键和鼠标事件都绑定在剪切、复制和粘贴中。

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