时间戳

首页 > 解决方案 > HTML粘贴事件，将粘贴区域限制为div边框

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

问题描述

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

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

所以我将粘贴事件绑定到div选择器。

问题是每次用户按下ctrl+时都会触发该事件v，即使鼠标不在 div 上也是如此。

我试图检查event.currentTarget- 可能我可以问它是否是div，但它总是给我div选择器，即使当我在其他元素上发生ctrl+时也是如此。v

这是我的代码：

HTML：

<div id="myPasteZone" style="border:1px solid black;height: 150px;width: 35vw"></div>

Javascript（类型脚本）：

 $('#myPasteZone').bind("paste", (e)=>{
        const file = e.originalEvent.clipboardData.files[0];
        if(file){                
            this.addNewAttachment(file); 
        }
    });

有什么方法可以限制仅在 上的粘贴事件div？

标签： htmljquerypastejquery-events

解决方案

试试这个。我添加tabIndex到 div 以便它可以集中。然后，只有当它只聚焦时，您才能粘贴。

演示：（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>

推荐阅读