admin管理员组

文章数量:1516870

在开发网页应用时，很多时候都会遇到需要动态复制文本到剪贴板的需求。JavaScript 提供了几种不同的方法来实现这一功能，本文将详细介绍这些方法及其使用场景。

浏览器提供的三种主要 API

目前，主流浏览器提供了以下三种主要的 API 来复制文本到剪贴板：

1. 异步剪贴板 API

异步剪贴板 API 是最现代化的方案，使用 navigator.clipboard.writeText() 方法。

特点：
  • 哈 起支持。
  • API 是异步的，使用 ，安全提示不会中断页面中的 JavaScript。
  • 可以直接将变量中的文本复制到剪贴板。
  • 仅支持在通过 HTTPS 服务的页面上使用。
  • 在 Chrome 66 中，即使页面在后台标签页面，也可以复制到剪贴板而不需要权限提示。

使用示例： 

navigator.clipboard.writeText("要复制的文本").then(()=>{
   
   
  console.log('复制成功！');}).catch(err=>{
   
   
  console.error('复制失败：', err);});

2. document.execCommand('copy') (已弃用)

特点：
  • 大多数浏览器在 2015 年 4 月前后开始支持。
  • 访问是同步的，会中断页面中的 JavaScript，直到完成，包括用户交互的安全提示。
  • 文本从 DOM 中读取并放入剪贴板。
  • 测试期间（2015 年 4 月左右）只有 Internet Explorer 显示权限提示时在写入剪贴板。

虽然已经被弃用，但为了兼容性，有时仍会用到此方法。使用示例： 

functionfallbackCopyTextToClipboard(text){
   
   var textArea = document.createElement("textarea"

本文标签： 使用异步剪贴编程

版权声明：本文标题：聪明的代码小技巧：使用JS快速复制文本至剪贴板 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1772474008a3274780.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。