原生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 2022-12-09 18:16  逍遥云天  阅读(363)  评论(0)  编辑  收藏  举报

导航