前言

最近评估一个需求，要求将展示的电话号码点击一下按钮就能复制，不要选中右键复制，甲方爸爸提的要求，咋样都得做出来呀。

实现

复制功能我们在手机短信中经常遇到，点击号码链接有复制或者跳转，因为需求项目是pc端，所以只考虑pc端，功能相对而言好做很多，这里有两个方法可以选择。

document.execCommand("Copy")。doucment.execCommand可以操作可编辑内容区域的元素，copy是其中一个命令，它可以将选中的内容拷贝到剪贴板。该方法已经被一些浏览器弃用了，所以如果想使用的话需要看一下当前浏览器是否支持。我们用将想要复制的内容放到一个dom元素中，用select选中，再调用该方法即可。

   <button onclick="copy()">复制</button>
    <script>
      function copy() {
        const content = '123456789'
        const wrapper = document.createElement('input');
        wrapper.value = content;
        document.body.appendChild(wrapper);
        //选中内容
        wrapper.select();
        //将内容添加到剪切板
        document.execCommand('Copy');
        //清空
        wrapper.remove();
      }

点击页面上的复制按钮，剪切板内容就是‘123456789’。上面例子是在html中实现的，如果是vue，直接将该方法放到methods中就可以了。

navigator.clipboard。clipboard可以用来读写剪贴板内容，有以下方法：
read():获取剪贴板数据，如图片。
readText():获取剪贴板文本数据。
write():写入数据到剪贴板。
writeText():写入文本数据到剪贴板。
四种方法都返回一个promise对象，使用该方法也需要注意兼容性。上面案例我们将复制部分换成该方法：

    function copy() {
        const content = '123456789';
        //将数据添加到剪贴板
        navigator.clipboard.writeText(content).then(()=>{
          window.alert('复制成功')
        })
      }

clipboard除了文字还能将图片等数据放到剪贴板，功能还是挺强大的。在实际项目中我们可以直接下载clipboard对应的插件——clipboard.js，还有与vue配套的插件——vue-clipboard2。

总结

以上就是点击复制的实现方法，归根结底还是将想要复制的内容放到剪贴板中，文中的方法都有兼容性问题，使用的时候要特别注意下。

需求小能手——点击复制

前言

实现

总结