在 html div 上粘贴事件，没有可编辑的内容
Posted
技术标签:
【中文标题】在 html div 上粘贴事件，没有可编辑的内容【英文标题】：Paste Event on html div without content editable 【发布时间】：2016-09-02 11:16:18 【问题描述】：我需要在 div 上绑定粘贴事件，以便我可以从剪贴板中抓取图像并将其分配给角度范围变量。这在 chrome 中可以正常工作，但如果不添加 contenteditable=true 属性，它在 IE 11 上不起作用。内容可编辑的问题是它破坏了 div 现有的拖放功能。
我看起来类似于 snag.gy，我们可以粘贴而无需 contenteditable。
请指教
[更新] 用于测试的 Js Fiddle https://jsfiddle.net/sfL6ympx/ - 你可以删除 contenteditable=true 并检查
【问题讨论】：
如何让 div 聚焦以便它可以接受事件？也许IE中的问题是div没有焦点？ div 有最小高度，所以我可以点击 div 并且可以聚焦。它适用于铬 适用于 chrome 从未帮助我解决 IE 问题。你在这里提供的信息远远不够。您应该在 jsfiddle / 上发布示例。 "不添加contentEditable=true它在任何地方都不起作用。
【参考方案1】：
我想我明白你想要做什么。但是，snag.gy 在没有 contenteditable=true 的情况下执行此操作，因为它们的粘贴事件不依赖于其 DOM 中的特定元素。所以，这是一个window.onkeyDown 事件。
您可以根据需要将它们结合起来。一次，div 被点击，将焦点设置在它上面。当该 div 上有 keyDown 事件时，请检查：
if( (event.keyCode == 86 || event.which == 86) && event.ctrlKey )
'86' 是 V 的 keyCode。然后，在该块中执行您的代码！
【讨论】：
你可以用tabindex=1让div接受焦点。
谢谢，我会努力找回的【参考方案2】：
实际上，通过一些逆向工程，我们可以看到 snag.gy 确实使用了contenteditable=true，并使用了一些 css 来隐藏它，并使用一些 javascript 来确保它在粘贴事件。
这是怎么做的：
演示：https://jsfiddle.net/raine/zyf40Lnc/40/show 小提琴：https://jsfiddle.net/raine/zyf40Lnc/40/<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* invisible paste capture element */
#paste-capture-parent
z-index: -500;
width: 0;
height: 0;
overflow: hidden;
position: fixed;
#paste-capture-area
-webkit-user-select: auto !important
</style>
</head>
<body>
<div id="paste-capture-parent">
<div id="paste-capture-area" contenteditable="true"></div>
</div>
<pre id="output"></pre>
<script type="text/javascript">
// get elements
const captureArea = document.getElementById('paste-capture-area')
const output = document.getElementById('output')
// focus the capture area when a key is pressed
document.addEventListener('keydown', () => captureArea.focus())
// detect paste on capture area
captureArea.addEventListener('paste', e =>
const text = e.clipboardData.getData('text/plain')
output.innerHTML += `You pasted: "$text"\n`
)
</script>
</body>
</html>
【讨论】：
以上是关于在 html div 上粘贴事件，没有可编辑的内容的主要内容，如果未能解决你的问题，请参考以下文章