谷歌浏览器 怎么用js复制东西到剪贴板

JavaScript023

谷歌浏览器 怎么用js复制东西到剪贴板,第1张

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)

}