js 复制功能之原理与注意事项

最新推荐文章于 2021-12-06 14:13:43 发布

it_lin_web

最新推荐文章于 2021-12-06 14:13:43 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： js 学习与交流

本文链接：https://blog.youkuaiyun.com/it_lin_web/article/details/101027208

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

学习与交流

4 篇文章

订阅专栏

本文探讨了JavaScript中实现复制功能的原理，包括使用`document.execCommand('copy')`方法，以及在不同浏览器中的兼容性和处理方式。同时，文章还提到了在实现过程中需要注意的用户权限、安全性问题和最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>js复制原理</title>
</head>
<style>
.daima{
   background-color: #e0e0e0;
   padding: 10px;
   width: 600px;
   margin: 30px auto;
   position: relative;
}
.copy{
   position: absolute;
   top: 20px;
   right: 20px;
   background-color: #ccc;
   border-radius: 5px;
   padding: 8px 16px;
   cursor: pointer;
   font-size: 14px;
   color: #0094ff;
}
</style>
<body>
   <div class="daima">
      <pre>
         <code class="codecont"></code>
      </pre>
      <span class="copy" onclick="copyCode()">复制代码</span>
   </div>
</body>
</html>
<script>
   var text = `
downFile = (data)=>{
   if (!data) {
      alert('没有上传')
      return
   }
   // 转换下载数据的url
   let url = window.URL.createObjectURL(new Blob([data]))
   // 创建a标签
   let a = document.createElement('a')
   a.style.display = 'none'
   a.href = url
   a.setAttribute('download', data.name)
   document.body.appendChild(a)
   a.click();
   a.remove();
};`
  document.getElementsByClassName('codecont')[0].innerHTML = text

  // 复制代码 -- 个人推荐使用 pre 标签来显示（容易控制样式），textarea 标签用来复制
  copyCode = ()=>{
      let textarea = document.createElement('textarea')
      // 要往html添加结构，才能复制成功（注意不要使用 display: none 去隐藏textarea标签，会复制不成功）
      textarea.style="position: absolute;z-index: -9999;top: 0;left: -200%;"
      document.body.appendChild(textarea)
      textarea.innerHTML = text.trim()
      textarea.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      alert("内容复制成功！");
      textarea.remove()
  }
</script>