原生js实现复制功能

h5新增了execCommand函数,就可以直接实现复制功能了,再也不用复制插件了,示例代码如下:

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <script>
      function copy() {
        const txt = document.getElementById("code").innerText
        // 添加一个input元素放置需要的文本内容
        const dataContainer = document.createElement('input');
        dataContainer.value = txt;
        document.body.appendChild(dataContainer);
        // 选中并复制文本到剪切板
        dataContainer.select();
        document.execCommand('copy');
        // 移除input元素
        document.body.removeChild(dataContainer);
        alert('复制成功');
      }
    </script>
    <title>标题</title>
  </head>
  <body>
    <p><span id="code">999999</span><button onclick="copy()">复制</button></p>    
  </body>
</html>
复制代码

当然,这个函数不止复制功能,更多功能研究中......

另外,同H5的其他一些新特性一样,在低版本的ios浏览器中,可能会不支持这个命令。

posted on   逍遥云天  阅读(378)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示