Question

我最初的目标是从剪贴板中粘贴图像。但是我遇到了粘贴事件的麻烦。

在JSFiddle中，我重现了这个问题，HTML只包含一个div：

<div style="width: 200px; height: 200px; background: grey" id="pasteTarget" > </div>

JavaScript首先将我的函数handlePaste（）绑定到粘贴事件。

window.onload = function() {
    //adding paste event listener on the div
    document.getElementById("pasteTarget").
        addEventListener("paste", handlePaste);
};

当用户按下Ctrl + V或在浏览器的菜单中选择“粘贴”时，应该调用此函数。

function handlePaste(e) {
    alert("I'm in handlePaste");    
    for (var i = 0 ; i < e.clipboardData.items.length ; i++) {
         var item = e.clipboardData.items[i];
         console.log("Item: " + item.type);
         alert(item.type);
     }   
}

重要提示：该函数访问e.clipboardData以获取剪贴板的内容。例如，如果按PrtScrn键，然后按Ctrl + V，则会将打印屏幕图像发送到handlePaste方法。最后一个警报在工作正常时显示“image / png”。

Chrome v37：JsFiddle工作正常。 Firefox v32：未调用handlePaste（）方法，第一个警报不会弹出。

jsFiddle代码：http://jsfiddle.net/demeylau/ke44bufm/1/

Answer 1

据我所知，您必须按浏览器代理分别处理粘贴。 Joshua Gross在本文中介绍了粘贴事件的许多复杂问题：Paste Wasteland

Firefox喜欢更加迟钝，但通过将剪贴板数据视为Blob，可以将图像数据作为文件读取。（参见Gross＆＃39;文章中的后记）这是处理操作系统事件的浏览器中几乎未解决的遗留代码，它们以稍微不同的方式处理操作系统事件，并简洁地总结了为什么我们在WebAPI这样的事情中标准化了大多数新功能。我希望这会有所帮助。

JavaScript粘贴事件在Chrome中运行良好但在Firefox中运行良好

1 个答案: