我使用来自this question 的代码进行跨浏览器粘贴实现。它适用于我测试过的所有浏览器(向下滚动查看实际解决方案/代码)。需要注意的是,event.clipboardData 在粘贴事件执行完成后立即过期。
我继续四次检查这在 Firefox 版本 19 中是否有效(我没有 13 个可用,但听起来这个问题是关于新版本中功能的退化)。
下面是答案,引用自Nico Burns:
解决方案
在 IE6+、FF 3.5+、Opera、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>
说明
onpaste 事件附加了handlepaste 函数,并传递了两个参数:this(即对事件附加到的元素的引用)和event,它是事件对象。
handlepaste 函数:
第一行只是将可编辑 div 的内容保存到一个变量中,以便在最后可以再次恢复。
if 检查浏览器是否是 webkit 浏览器(chrome 或 safari),如果是,它将可编辑 div 的内容设置为正在粘贴的数据。然后它会取消该事件以防止 webkit 粘贴任何内容两次。这是因为 webkit 很笨拙,如果你简单地清除 div 就不会粘贴任何东西。
如果它不是 webkit 浏览器,那么它只是清除可编辑的 div。
然后它调用waitforpastedata函数
waitforpastedata 函数:
这是必要的,因为粘贴的数据不会立即出现,所以如果您直接调用processpaste,那么它将没有任何数据要处理。
它的作用是检查可编辑的 div 是否有任何内容,如果有则调用processpaste,否则它会设置一个计时器来调用自身并在 20 毫秒内再次检查。
processpaste 函数:
此函数将可编辑 div 的 innerHTML(现在是粘贴的数据)保存到一个变量中,将可编辑 div 的 innerHTML 恢复为其原始值,并警告粘贴的数据。显然,在实际使用场景中,您可能想要的不仅仅是警报数据,您可以从这里做任何您喜欢的事情。
您可能还希望通过某种数据清理过程运行粘贴的数据。这可以在它仍然在可编辑的 div 中时完成,也可以在提取的字符串上完成。
在实际情况中,您可能希望先保存选择,然后再恢复它 (Set cursor position on contentEditable <div>)。然后,您可以将粘贴的数据插入到用户启动粘贴操作时光标所在的位置。
附:这段代码 IE jsfiddle 的组合似乎不起作用,但在非 jsfiddle 环境中的 ie