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 (在输入和文本区域之外) 被捕获。
  • IEFirefox 中,Ctrl+V 在可粘贴对象外(输入和文本区域) 未被捕获。
    (但绑定(bind)文档粘贴事件会捕获所有 inputstextareaspaste 事件。)

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

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

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

PPS:我已经使用了 spellcheck=falseautocomplete=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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com