捕获没有焦点输入或文本区域的文档级粘贴事件

Capture Document-level Paste event without focused Input or Textarea

本文关键字：文档事件区域文本焦点输入更新时间：2023-09-26

<!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上。

在谷歌浏览器(和Opera 15+(中，捕获了一个没有插入符号(外部输入和文本区域(的Ctrl+V。
在 IE 和 Firefox 中，不会捕获可粘贴对象(输入和文本区域(之外的Ctrl+V。
(但绑定文档粘贴事件会捕获所有inputs和textareas的paste event。

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

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

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

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

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

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

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

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

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

至于 firefox 和 IE，它实际上在允许触发粘贴事件之前检查元素。所以基本上，你需要一个内容可编辑的元素，以便粘贴事件在所有浏览器中工作。

我尝试使用内容可编辑的 DIV 作为页面上的主要div，我认为它似乎产生了您正在寻找的结果。如果答案看起来有些"黑客"，请原谅我。

您可以将内容可编辑的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;
});

一些注意事项：

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

希望这有帮助