在 html div 上粘贴事件，没有可编辑的内容答案

【问题标题】：Paste Event on html div without content editable在 html div 上粘贴事件，没有可编辑的内容
【发布时间】：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它在任何地方都不起作用。

标签： javascript jquery html angularjs

【解决方案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>

【讨论】：