最近做的一个项目中,有一个点击按钮后,复制文本的需求,关于使用 JS
复制文本的情况,很久以前曾经看到过,不过也仅是稍稍有些印象,对于到底如何复制,是否有什么兼容性要求等,都一概不知,但觉得应该没什么难度的。
但是当我自己真正做起来的时候,才发现这其中存在不少坑,各种浏览器实现复制的方法都不一样,而且无论怎么做兼容,似乎都不可能让所有的浏览器都能实现复制到粘贴板的功能。
几种主要方法总结如下。
execCommand
关于复制到粘贴板的功能,网上出现频率最多的方法就是 execCommand
。
原理其实很简单明确,首先获取你想要复制的文本所在的元素,使用 js
选择器即可,例如 document.getElementById('txt')
,然后使用 select
选择到文本,最后调用 execCommand
方法进行复制。
function copy(){
let ele = document.getElementById('txt')
ele.select()
document.execCommand('Copy')
}
我用最新版 Chrome
试验了一下,这里的 select()
方法只对 input
或者 textarea
元素有效,只有txt
是 这两个元素时,才有可能复制成功,其他元素全部失败。
这里需要说明的是,document.execCommand()
方法有很多参数,Copy
只是其中一个:
// 选中网页中的全部内容
document.execCommand('selectAll')
// 打开 命令,相当于单击文件中的打开按钮
document.execCommand('open)
// 另存为 命令,将当前页面另存为
document.execCommand('saveAs)
// 打印 命令,需要存在打印机
document.execCommand('print)
// 剪贴选中的文字到剪贴板
document.execCommand('Cut','false',null)
// 删除选中的文字
document.execCommand(Delete','false',null)
....等等
以上就是document.execCommand()
其中一部分使用方法,当然了,兼容性堪忧,几乎没什么浏览器实现,我用最新版的 Chrome
操作以上方法,没一个有响应的。
除了配合