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

Question

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

javascriptjqueryhtml

5

textbox

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

当我将光标聚焦在浏览器地址栏中并使用Ctrl+v或右键单击并粘贴转到事件时，它应该从文本框中粘贴已复制的URL并转到特定的URL。

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

- Ravi Kavaiya

2

这是一个past事件还是paste事件？ - Antony

我需要绑定粘贴事件和Ctrl+V。 - Ravi Kavaiya

看一下这个链接 https://dev59.com/Bmgu5IYBdhLWcg3wEzHP - MattP

Mattp：是的，我尝试过了，但它没有正常工作。 - Ravi Kavaiya

请查看此链接：http://text2clipboard.com/demo.php - Lucky

2个回答

0

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

- Cyrus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucky · Accepted Answer

检查这个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!');
    }
});

请查看这个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>

希望这可以帮助你。