个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 15:11:29 26 4
gpt4 key购买 nike 

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

^ 我有这个演示代码。它在 INPUT[TEXT] 和 DOCUMENT 上绑定(bind)了 paste 事件 .

  • 在 Google Chrome(和 Opera 15+)中，一个没有插入符号的 Ctrl+V (在输入和文本区域之外) 被捕获。
  • 在 IE 和 Firefox 中，Ctrl+V 在可粘贴对象外(输入和文本区域) 未被捕获。
    (但绑定(bind)文档粘贴事件会捕获所有 inputs 和 textareas 的 paste 事件。)

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

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

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

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，我认为它似乎产生了您正在寻找的结果。如果答案看起来有些“老套”，请原谅我。

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

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

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 的较新版本，以便粘贴事件在文档上起作用。

希望对你有帮助

关于javascript - 捕获没有焦点输入或文本区域的文档级粘贴事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18429635/

26 4 0
文章推荐： android - 无法在android SDK中创建项目
文章推荐： c - 为什么 C 中没有内置的 swap 函数，而 Assembly 中有 xchg？
文章推荐： c - 优化 "i = b ? (i | mask) : (i & ~mask)"
文章推荐： html - 使用 box-sizing 创建内边框
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com