Question

我使用 html-div-element 上的粘贴事件让用户粘贴图像。

我希望用户粘贴图像时站在div上。

因此我将粘贴事件绑定到div选择器。

问题在于，即使用户没有将鼠标放在div上，每次按下ctrl+v都会触发该事件。

我尝试检查event.currentTarget-可能会问是否是div，但是即使{{1} }发生在我位于其他元素上时。

这是我的代码：

HTML：

div

Javascript（类型脚本）

ctrl+v

有什么方法可以仅在<div id="myPasteZone" style="border:1px solid black;height: 150px;width: 35vw"></div>上限制粘贴事件吗？

Answer 1

尝试一下。我在div中添加了tabIndex，以便可以集中精力。然后，仅在聚焦时，您才能粘贴。

演示：（ctrl + v）

$(document).ready(function() {

  $('#myPasteZone').bind("paste", (e) => {

    try {
      if ($(":focus")[0].id === "myPasteZone") { // check if div focused
        const file = e.originalEvent.clipboardData.files[0];
        if (file) {
          this.addNewAttachment(file);
        }
        console.log('pasted');
      }
    } catch (e) {
      return;
    } // catch if id not exist
  });
});

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

<body>
  <div id="myPasteZone" tabindex="-1" style="border:1px solid black;height: 150px;width: 35vw"></div>

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p>hello, world</p>
</body>

HTML粘贴事件，将粘贴区域限制为div边框

1 个答案: