8 
<!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 eventonINPUT[TEXT]和DOCUMENT.

  • 在Google Chrome（和Opera 15+）中，捕获Ctrl+V了没有插入符号（外部输入和文本区域）的 a。
  • 在IE 和Firefox中，不会捕获Ctrl+V外部可粘贴对象（输入和文本区域） 。（但绑定所有和
    的文档粘贴事件捕获。）paste eventinputstextareas

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

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

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

PPS：我已经使用spellcheck=falseandautocomplete=off技巧来允许粘贴更多文本......但它仍然会挂起一段时间，而且我不需要它可编辑，这是一个更好的解决方案。

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

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

4

1 回答 1

5

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

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

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

至于 Firefox 和 IE，它实际上会在允许触发粘贴事件之前检查元素。因此，基本上，您需要一个内容可编辑元素才能使粘贴事件在所有浏览器中工作。

我尝试使用内容可编辑的 DIV 作为页面上的主 div，我认为它似乎产生了您正在寻找的结果。如果答案看起来有点“骇人听闻”，请原谅我。

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

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

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

几点注意事项：

  1. 用户仍然必须单击页面主体才能激活粘贴事件。即点击浏览器本身可能是不够的。

  2. 在 firfox 中，您需要在子 div 中设置 contenteditable="false"，否则用户可以向这些元素添加文本。

  3. 我必须将 div 的高度和宽度设为 100%。如果您的 html 和 body 不是 100% 的高度和宽度，它在 IE 中将不起作用。

  4. 我必须将 jquery 库更改为 IE 的较新版本，以便粘贴事件在文档上工作。

希望这可以帮助

于 2014-07-11T19:58:45.013 回答