如何从javascript中的ctrl + v键事件中获取复制的值答案

【问题标题】：How to get copied value from ctrl+v key event in javascript如何从javascript中的ctrl + v键事件中获取复制的值
【发布时间】：2011-10-01 16:28:49
【问题描述】：

此方法检测到 ctrl + v 事件但我找不到如何获取它的值？

提前致谢，

$(".numeric").keydown(function (event) {
    if (event.shiftKey) {
        event.preventDefault();
    }

    switch (event.keyCode) {

        case 86:
            if (event.ctrlKey) { // detects ctrl + v
                var value = $(this).val();
                alert(value); // returns ""
            }
            break;

    }

【问题讨论】：

值是什么意思 - 复制的确切文本？
@Pekka，是的，我需要复制的文本。如果我得到它，稍后我会进行一些验证并将其放在文本框上
所以你的意思是 inserted 值？也许把措辞改成那样
@Pekka 我在任何地方复制了一些文本，然后我想将其粘贴到文本框（：就是这样。是的，我们也可以说插入值。感谢您的关注。

标签： javascript jquery

【解决方案1】：

您所要做的就是将它挂接到粘贴事件中，让它通过中断调用堆栈完成，然后读取值。

它可能看起来很难看，但它对跨浏览器非常友好，并且可以节省您创建大量蹩脚的代码来读取实际剪贴板。

$(".numeric").bind('paste', function (event) {

  var $this = $(this); //save reference to element for use laster


  setTimeout(function(){ //break the callstack to let the event finish

    alert($this.val()); //read the value of the input field   

  },0); 
});

在此处查看实际操作：http://jsfiddle.net/Yqrtb/2/

更新：

由于我最近不得不做类似的事情，我想我会分享我的最终实现，它是这样的：

$('textarea').on('paste',function(e) {
    //store references for lateer use
    var domTextarea = this,
        txt = domTextarea.value,
        startPos = domTextarea.selectionStart,
        endPos = domTextarea.selectionEnd,
        scrollTop = domTextarea.scrollTop;

    //clear textarea temporarily (user wont notice)
    domTextarea.value = '';

    setTimeout(function () {
        //get pasted value
        var pastedValue = domTextarea.value;

        //do work on pastedValue here, if you need to change/validate it before applying the paste

        //recreate textarea as it would be if we hadn't interupted the paste operation
        domTextarea.value = txt.substring(0, startPos) + pastedValue + txt.substring(endPos, txt.length);
        domTextarea.focus();
        domTextarea.selectionStart = domTextarea.selectionEnd = startPos + pastedValue.length;
        domTextarea.scrollTop = scrollTop;

        //do work on pastedValue here if you simply need to parse its ccontents without modifying it


    }, 0);
});

【讨论】：

当您需要在输入数据之前对数据进行处理时，您会怎么做？
你编写了很多可怕的复杂代码来读取剪贴板。说真的，由于损坏的调用堆栈使数据的读取发生在粘贴后不到 1 毫秒，您可以在事后读取它，将值设置为空，编辑值并自行重新设置。用户不会更聪明，你有一个简单的解决方案。
我做了一个更新小提琴，向您展示如何修改输入：jsfiddle.net/Yqrtb/3 - 从用户体验的角度来看，更改发生在粘贴值插入到字段之前。跨度>
+1，我完全是为了一个简单的解决方案，最终根据需要工作。但是，这种解决方案掩盖了真正发生的事情（这可能是 AFA 真正了解事情如何工作的一件坏事），并且如果您需要处理大量粘贴的数据并在用户界面。
@hvgotcodes：在大多数情况下，您可以在事件处理程序中保存旧值，然后在超时函数内部处理时将输入字段重置为该值。真的 - 如果您需要对粘贴进行大量处理，您就会遇到用户体验问题，因为让用户等待粘贴是让他们逃离您的网站的好方法

【解决方案2】：

它非常依赖于浏览器。数据在传递给您的处理程序的事件中。在 safari/chrome 中，我们正在监听输入上的 paste 事件，然后做

event.clipboardData.getData('text/plain')

在回调中，它似乎工作正常。您应该使用您最喜欢的调试器并在您的粘贴事件处理程序中放置一个断点，然后查看传入的事件。

【讨论】：

跨浏览器平台读取剪贴板是一个可怕的混乱，我强烈建议不要这样做，因为有更简单的方法可用。
-1，我同意 martin... 这不是一个非常可靠的方法，它取决于用户的浏览器。

【解决方案3】：

你需要一个技巧。我之前在 Stack Overflow 上详细介绍过几次：

【讨论】：

【解决方案4】：

这很简单，下面的代码可以正常工作，在我的例子中，它需要剪贴板上包含的文本。

function onPaste(info) {
  var copied = event.view.clipboardData.getData("Text");
  alert(copied);
}

在这种情况下，名为 copied 的变量包含您需要的值。

【讨论】：

您还应该展示它应该如何实现，例如教授paste事件。
@Akxe 您可以在组件中调用方法或指定方法 usign jquery: $('yourComponent').on('paste ', function () { var 复制 = event.view.clipboardData.getData("Text"); });