如何在Firefox中从剪贴板获取数据 [英] How to obtain data from clipboard in Firefox

问题描述

我想触发元素上的onpaste事件来检索剪贴板中的数据（我想检查图像是否存在于剪贴板中并将其上传到服务器）。它在Chrome上运行完美：
$ b

  $（'＃textarea'）[0] .onpaste = function（event）
 {
 var items = event.clipboardData.items; 
 
 if（items.length）
 {
 var blob = items [0] .getAsFile（）; 
 var fr = new FileReader（）; 
 
 fr.onload = function（e）
 {
 alert（'got it！'）; 
} 
 
 fr.readAsDataURL（blob）; 
 
 
 
 
 
不适用于Firefox： event.clipboardData.items 不存在。你有什么想法如何检索元素中的onpaste事件吗？
 
解决方案
你需要创建一个contenteditable div来保存图像on paste 
  var pasteCatcher = $（'< div />'，{'id'：'container'}） ; 
 $（'body'）。append（pasteCatcher）; 
 var pasteCatcher = document.getElementById（'container'）; 
 pasteCatcher.setAttribute（contenteditable，）; 
  
然后您需要等待粘贴事件并处理它
 
 
  window.addEventListener（paste，processEvent）; 
函数processEvent {
 //一些函数
} 
  
也写代码从contenteditable div抓取图像数据并发送到服务器。
 
I would like to trigger onpaste event on  element to retrieve data in clipboard (I want to check if image exists in clipboard and upload it into the server). It works perfect on Chrome:
$('#textarea')[0].onpaste = function(event)
{
    var items = event.clipboardData.items;

    if (items.length)
    {
        var blob = items[0].getAsFile();
        var fr = new FileReader();

        fr.onload = function(e)
        {
            alert('got it!');
        }

        fr.readAsDataURL(blob);
    }
}
Does not work on Firefox: event.clipboardData.items does not exists. Do you have any idea how to retrive onpaste event in  element?
解决方案
You need to create one contenteditable div which will hold the image on paste
var pasteCatcher = $('<div/>',{'id':'container'});
$('body').append(pasteCatcher);
var pasteCatcher = document.getElementById('container');
               pasteCatcher.setAttribute("contenteditable", "");
then you need to wait for paste event and process it
 window.addEventListener("paste",processEvent);
function processEvent(e) {
//some functionality
}
Also write the code to grab the image data from contenteditable div and send it to server.

                        
这篇关于如何在Firefox中从剪贴板获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！