JS实现复制内容到剪切板

最新推荐文章于 2024-06-16 17:45:08 发布

风风草

最新推荐文章于 2024-06-16 17:45:08 发布

阅读量174

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/u011523953/article/details/113757804

版权

document.execCommand JavaScript 复制 textarea 前端开发

关键词由CSDN通过智能技术生成

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

说明：借助原生document.execCommand()方法

全部代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="txt">需要被复制的内容</div>
    <button onclick="copy()">点击复制</button>
    <script type="text/javascript">
      const copy = () => {
        const txt = document.getElementById("txt").innerText; //需要被复制的内容
        const copyTxt = document.createElement("textarea"); //创建textarea标签临时存储复制的内容
        copyTxt.setAttribute('readonly', 'readonly'); // 防止IOS系统上弹出软键盘
        copyTxt.value = txt;
        document.body.appendChild(copyTxt);
        copyTxt.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        copyTxt.style.display = "none";
        alert("复制成功");
      };
    </script>
  </body>
</html>

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

风风草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现复制内容到剪切板

说明：借助原生document.execCommand()方法全部代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title&
复制链接

扫一扫

专栏目录