背景
复制粘贴作为一个常用的功能,那么js中的复制函数怎么用类
Document.execCommand() 方法
MDN 上说: 已废弃: 该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。目前谷歌还可以用的。那我不就不管它废不废了
// 使用方法
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
返回值:
返回一个 boolaen值 如果是 false 则表示操作不被支持或未被启用。
可以看出它可以回传三个参数,
- aCommandName:命令的名称。 这里只说 copy cut 和 paste,
- aShowDefaultUI:是否展示用户界面,一般为 false。用不着不说了。可选参数
- aValueArgument:是在 1 的命令中有写需要额外的参数,在这里传。可选参数
copy复制,cut粘贴:拷贝当前选中内容到剪贴板。
var dom = document.querySelector('.linkbox')
dom.select() // 调用select 方法选中文本
document.execCommand('copy','false',null) // 调用copy实现复制
因为这个方法可能在一些浏览器废除了,可以写个错误捕捉,cut和copy只需换掉命令就行了。
try{
if(document.execCommand('copy','false',null)){
alert('复制成功!')
}
}catch(err){
alert('复制错误!')
}
paste 粘贴操作:在光标位置粘贴剪贴板的内容,如果有被选中的内容,会被替换。
var dom = document.querySelector('.inputbox')
dom.focus(); // 调用聚焦事件
document.execCommand('paste') // 将粘贴板的内容粘贴到这里。同样也可以使用上面的错误处理
总结
首先,它只能将选中的内容复制到剪贴板,无法向剪贴板任意写入内容。
其次,它是同步操作,如果复制/粘贴大量数据,页面会出现卡顿。有些浏览器还会跳出提示框,要求用户许可,这时在用户做出选择前,页面会失去响应。
最后,它的支持性并不会太好,尤其是在移动端。使用需谨慎。