javascript - 可粘贴 div : paste disappear in context-menu, 只能通过 ctrl+V 工作

Question

我有 HTML div，我通过以下方式将其设置为可粘贴区域:

$('#' + pasteZoneId).bind("paste", (e)=> {

当用户按 ctrl+v 时，一切正常，事件被触发。 问题是，当用户右键单击上下文菜单进行粘贴时，粘贴选项会在上下文菜单中消失。

我应该做什么？

---

更新:

更多细节:我并不是说用户可以在 div 中粘贴内容，例如文本等。div 并不是真正可粘贴的；我捕获粘贴事件，然后有 y 逻辑，并只粘贴图像。 我获取图像，我通过Jquery将其附加到div；不是浏览器。

现在的问题只是如何使上下文菜单显示“粘贴”选项，因为当用户按 ctrl+V 时效果很好，事件被触发并且图像由我的代码附加，所以我只想让用户单击粘贴而不是按粘贴。

Answer 1

虽然每个元素都可以接收粘贴事件，但该事件将始终被忽略(没有默认行为)，除非该元素是 <input> ，一个<textarea> ，或在contentEditable模式下。

因此，虽然没有关于浏览器应在上下文菜单中显示什么内容的规范，但事实上，大多数浏览器都不会显示“粘贴”，无论如何它都会被忽略。

所以要把它放在你的 <div> 上，你必须有它的 contentEditable属性设置为 true。

如果您不总是想要它，您可以在 mousedown 事件中修改一些内容:

target.onmousedown = e => {
  if (e.button === 2) target.contentEditable = true;
  // wait just enough for 'contextmenu' to fire
  setTimeout(() => target.contentEditable = false, 20);
};

target.onpaste = e => {
  e.preventDefault();
  console.log('got paste data:', e.clipboardData.getData('text'));
};

<div id="target">right click me</div>