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浏览器中,可能会不支持这个命令。
标签:原生,body,txt,js,复制,dataContainer,input,document From: https://www.cnblogs.com/xyyt/p/16969699.html