复制粘贴

194 阅读2分钟

背景

复制粘贴作为一个常用的功能,那么js中的复制函数怎么用类

Document.execCommand() 方法

MDN 上说: 已废弃:  该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。目前谷歌还可以用的。那我不就不管它废不废了

// 使用方法
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

返回值: 返回一个 boolaen值 如果是 false 则表示操作不被支持或未被启用。

可以看出它可以回传三个参数,

  1. aCommandName:命令的名称。 这里只说 copy cut 和 paste,
  2. aShowDefaultUI:是否展示用户界面,一般为 false。用不着不说了。可选参数
  3. 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') // 将粘贴板的内容粘贴到这里。同样也可以使用上面的错误处理

总结

首先,它只能将选中的内容复制到剪贴板,无法向剪贴板任意写入内容。

其次,它是同步操作,如果复制/粘贴大量数据,页面会出现卡顿。有些浏览器还会跳出提示框,要求用户许可,这时在用户做出选择前,页面会失去响应。

最后,它的支持性并不会太好,尤其是在移动端。使用需谨慎。