Question

<!DOCTYPE html>
<html>
<head>
    <title>Clipboard Paste Text</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
</head>
<body>
    <input type="text" placeholder="paste in here" />
    <script type="text/javascript">
    /* <![CDATA[ */
    $(document, 'input[type="text"]').on('paste', function(event) {
        var oEvent = event.originalEvent;
        oEvent.preventDefault();

        var clipText = '';
        if(window.clipboardData){
            clipText = window.clipboardData.getData('Text');
        }else if(typeof oEvent == 'object' && oEvent.clipboardData){
            clipText = oEvent.clipboardData.getData('text/plain');
        }

        // console.log('Pasted ' + clipText.length + ' characters.');
        alert('Pasted ' + clipText.length + ' characters.');
    });
    /* ]]> */
    </script>
</body>
</html>

^ 我有这个演示代码。它绑定了paste event和INPUT[TEXT]上的DOCUMENT。

在 Google Chrome （以及 Opera 15 + ）中，Ctrl+V没有插入符号（外部输入和textarea）捕获。
在 IE 和 Firefox 中，未捕获可粘贴对象（输入和文本区域）之外的Ctrl+V。
（但绑定文档粘贴事件会为所有paste event和inputs捕获textareas。）

这是正确的行为吗？我的JS是否正确？

我想在所有三个浏览器中都没有输入文本框来捕获Ctrl + V. 我现在正在使用文本输入但我想完全删除它并捕获事件文档级别，而不是输入框级别。 可以吗？

PS ：如果粘贴在textarea中，我需要粘贴大量浏览浏览器的文本。我通过捕获hidden field中的paste event将其存储在inputbox中。我当前的解决方案工作正常，但我仍然想知道我是否遗漏了某些内容，或者FF和IE只会在输入/ textarea级别触发paste events。

PPS ：我已经使用了spellcheck=false和autocomplete=off技巧来粘贴更多文字......但它仍然有点挂起，因为我不喜欢不需要它可编辑，这是一个更好的解决方案。

PPS ：我的JS技能相当生疏（它们更像是JS生存模式）我不担心浏览器向后兼容性，因为那些人会使用这个更新经常而且很难。

制作了一个jsfiddle：http://jsfiddle.net/ninty9notout/A42UN/

Answer 1

来自http://www.w3.org/TR/clipboard-apis/ 5.1.3粘贴事件

粘贴事件在不可编辑的上下文中没有默认操作，但事件无论如何都会触发。

Chrome使用延迟粘贴事件，这意味着它不会检查焦点元素是否是可编辑的内容区域，这就是粘贴事件对文档起作用的原因。

对于firefox和IE，它实际上会在允许粘贴事件被触发之前检查元素。基本上，您需要一个内容可编辑元素，以使粘贴事件在所有浏览器中都能正常工作。

我使用内容可编辑DIV作为页面上的主要div，我认为它似乎产生了您正在寻找的结果。请原谅我，如果答案似乎有点＆＃34; hackish＆＃34;。

您可以将一个contenteditable div作为容器div放置到您网页的其余部分，并且当用户按下某个键时，不允许用户通过返回false键入div，除非它是粘贴的关键。 / p>

如果你想看看我是怎么做的，这是一个小提琴。

http://jsfiddle.net/NVqQ7/3/

HTML

<div id="pageDiv" contenteditable><div>other content</div></div>

CSS

html, body, #pageDiv {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

的javascript：

$(document).on('paste', function(event){
    var oEvent = event.originalEvent;
    if (event.preventDefault())
        event.preventDefault();

    var clipText = '';
    if(window.clipboardData){
        clipText = window.clipboardData.getData('Text');
    }else if(typeof oEvent == 'object' && oEvent.clipboardData){
        clipText = oEvent.clipboardData.getData('text/plain');
    }

    // console.log('Pasted ' + clipText.length + ' characters.');
    alert('Pasted ' + clipText.length + ' characters.');
});

$('#pageDiv').keydown(function(e){
    if (!event.ctrlKey)
        return false;
});

一些注意事项：

用户仍然必须单击页面正文才能激活粘贴事件。即单独浏览浏览器可能还不够。
在firfox中，你需要设置contenteditable =＆＃34; false＆＃34;在子div中，否则用户可以向这些元素添加文本。
我必须使div的高度和宽度为100％。如果您的html和正文不是100％的高度和宽度，它将无法在IE中使用。
我不得不将jquery库更改为IE的更新版本，以便粘贴事件可以在文档上使用。

希望这有帮助

捕获文档级粘贴事件，无需聚焦输入或文本区域

这是正确的行为吗？我的JS是否正确？

1 个答案: