Chrome原生支持window的copy方法
window.copy("this is a test string")这样,就把“this is a test string”复制到了剪贴板中
不过要注意,该方法的跨平台性不强,低版本的IE可能不支持
本篇文章不考虑浏览器兼容,谷歌浏览器亲测至少得88版本往上。Mac系统复制粘贴html数据,会自动加一些标签,小伙伴们自己测吧。一般需求用不着。
想要实现复制粘贴就只需要搞明白两件事就可以了。
第一就是如何往粘贴板里边存放数据,第二就是如何读取粘贴板里边的数据。
所操作的数据大致可以分为三类数据 1:字符串 2:带样式的HTML 3:图片 还有其他数据格式,还请各位小伙伴补充指教吧。
① 如果只是放普通字符串是最简单的
② 想要放入带格式的数据,比如想要往word内粘贴一个表格,跟正常写html标签加写样式是一样的
③往粘贴板内放入图片,目前只支持放png图片
其实也可以用放HTML的方式,把图片放入粘贴板内
//方法一:只对IE有效:<script>
function copyToClipboard() {
var d = document.all("source").value
window.clipboardData.setData('text', d)
}
</script>
<button onclick="copyToClipboard()">拷贝</button>
<input type="text" size=20 id="source" value="测试数据">
<button onclick="alert(window.clipboardData.getData('text'))">显示</button>
<button onclick="window.clipboardData.clearData('text')">清空</button>
直接复制是个很危险的操作,所以为了安全谷歌和其他浏览器都做了阻止,当然出来IE这种垃圾浏览器以外。目前网上的都是借助flash来达到兼容,其他的方法还真没见过。另外html5当然以谷歌内核为主:有条报道:Chrome doesn't do document.execCommand('copy') since October 2010.
2010年后谷歌就不允许使用上述方法复制了。当然可以以提醒的方法来做:
function copyToClipboard(text) {window.prompt("Copy to clipboard: Ctrl+C, Enter", text)
}