原生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:你的「微服务管家」又秀新绝活了