Question

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

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

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

我该怎么办？

更新：

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

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

Answer 1

已取消绑定和取消绑定，请使用on

尝试一下

var pasteZoneId="pasteZoneId";
$("#" + pasteZoneId).on("paste", (e)=> {
    alert("Pasting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="pasteZoneId">

</textarea>

您也可以按如下所示将它与div一起使用

var pasteZoneId="pasteZoneId";
$("#" + pasteZoneId).on("paste", (e)=> {
    alert("Pasting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pasteZoneId" contenteditable style="border:1px solid #000">

</div>

Answer 2

不要使用bind，而是创建一个事件监听器：

$("#" + pasteZoneId).on("paste", (e)=> {
    //Function here
});

Answer 3

每个元素都可以收到一个 paste 事件，但该事件将始终被忽略（无默认行为），除非Element是<input>，{{1 }}或 contentEditable 模式。

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

因此，要在您的<textarea>上获取它，必须将其<div>属性设置为true。

如果您不总是想要它，可以在 mousedown 事件中入侵某些东西：

contentEditable

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：粘贴在上下文菜单中消失，仅按ctrl + V可用

3 个答案: