我试图允许用户将图像粘贴到div
中。问题是我需要它在Firefox中工作。
据我所知,火狐从第13版开始(我认为)不允许JavaScript访问剪贴板,并且其中不存在event.clipboard。我知道这是可以做到的,因为Gmail和雅虎甚至在火狐中也支持它。
我只想让它在任何可能的情况下工作,与jQuery、JavaScript、HTML5一起工作,只要它在最新的Firefox中工作就行了。(不过没有闪光灯)。
我使用了这个问题中的代码来实现我的跨浏览器粘贴...它适用于我测试过的所有浏览器(向下滚动查看实际的解决方案/代码)。需要注意的是,event.clipboardData
在粘贴事件完成执行后立即过期。
我继续检查了Firefox版本19(我没有13个可用版本,但听起来这个问题是关于新版本中某个功能的降级)。
以下是引自尼科·伯恩斯的答案:
测试在IE6,FF 3.5,歌剧,Chrome,Safari的最新版本。
function handlepaste (elem, e) {
var savedcontent = elem.innerHTML;
if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
if (/text\/html/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/html');
}
else if (/text\/plain/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/plain');
}
else {
elem.innerHTML = "";
}
waitforpastedata(elem, savedcontent);
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
}
else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
elem.innerHTML = "";
waitforpastedata(elem, savedcontent);
return true;
}
}
function waitforpastedata (elem, savedcontent) {
if (elem.childNodes && elem.childNodes.length > 0) {
processpaste(elem, savedcontent);
}
else {
that = {
e: elem,
s: savedcontent
}
that.callself = function () {
waitforpastedata(that.e, that.s)
}
setTimeout(that.callself,20);
}
}
function processpaste (elem, savedcontent) {
pasteddata = elem.innerHTML;
//^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here
elem.innerHTML = savedcontent;
// Do whatever with gathered data;
alert(pasteddata);
}
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>