首页
前端开发
Javascript
兼容各浏览器的JS点击复制功能2018年

兼容各浏览器的JS点击复制功能2018年

0 次浏览 0 条评论
zip
zip

想实现一个点击复制的功能，不仅要能正常工作，还得兼容各大浏览器，这可不是件事。多时候，用到的最常见方法就是document.execCommand('copy')，它能快速复制文本。不过，老旧的浏览器不支持这个方法，这时就得想办法适配一下了。你可以选择使用navigator.clipboard API，这个在现代浏览器中能稳定工作，适合权限问题，功能更强大。不过，2018 年时，这个 API 还没完全普及，所以结合两者使用是个不错的选择。跨浏览器兼容性问题了，用户体验也能保证。你可以参考以下代码：

function copyText(textToCopy) {
  if ('clipboard' in navigator && 'writeText' in navigator.clipboard) {
    copyTextUsingClipboardApi(textToCopy);
  } else {
    copyTextUsingExecCommand(textToCopy);
  }
}
这样，能确保大部分浏览器的兼容性。其实，这个功能在多网页场景中都能见到，像是验证码、链接、邀码等内容的复制。如果你想在自己的项目中使用，可以参考这段代码，调试一下看看。

别忘了，随着技术发展，现在已有更好的替代方案，但理解这两种方式还是挺重要的，毕竟它们能你大多数浏览器兼容性的问题。

zip
兼容JScopy.zip 预估大小：2个文件
folder
兼容JScopy 文件夹
file
新建文本文档.txt 2KB
file
copy.js 15KB
zip 文件大小：4.47KB