原生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浏览器中，可能会不支持这个命令。
个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt
分类:
web前端开发
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了