Loading... # **注意第一种的内容不兼容Safari,全兼容的请使用第二种方法** ## 第一种 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要复制的内容赋值到input的value上; 2. 把这个input插入到body内; 3.获取这个input,对它执行选中; 4.执行documen的copy事件; 5,删除刚刚插入的input。 代码如下: html: ```html <button id="btn">复制</button> ``` js: ```js // 复制的方法 function copyText(text, callback){ // text: 要复制的内容, callback: 回调 var tag = document.createElement('input'); tag.setAttribute('id', 'cb_input'); tag.value = text; document.getElementsByTagName('body')[0].appendChild(tag); document.getElementById('cb_input').select(); document.execCommand('copy'); document.getElementById('cb_input').remove(); if(callback) {callback(text)} } // 点击按钮调用复制 document.getElementById('btn').onclick = function (){ copyText( '123456', function (){console.log('复制成功')}) } ``` 直接复制下来看效果的: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <button id="btn">复制</button> <script type="text/javascript"> // 复制的方法 function copyText(text, callback){ // text: 要复制的内容, callback: 回调 var tag = document.createElement('input'); tag.setAttribute('id', 'cb_input'); tag.value = text; document.getElementsByTagName('body')[0].appendChild(tag); document.getElementById('cb_input').select(); document.execCommand('copy'); document.getElementById('cb_input').remove(); if(callback) {callback(text)} } // 点击按钮调用复制 document.getElementById('btn').onclick = function (){ copyText( '123456', function (){console.log('复制成功')}) } </script> </body> </html> ``` ### layui表格点击复制 ```html <script id="contact" type="text/html"> <div style="font-size: 10px;color: #000;"> {{# if(d.wx){ }} <font class="tel-wx-stl" onclick="copyText($(this).text(),$(this))">{{d.wx}}</font> {{# }else{ }} 暂无微信号 {{# } }} </div> </script> //table //table js ... //js <script> function copyText(text, dom, callback){ // text: 要复制的内容, callback: 回调 let tag = document.createElement('input'); tag.setAttribute('id', 'cb_input'); tag.value = text; document.getElementsByTagName('body')[0].appendChild(tag); document.getElementById('cb_input').select(); document.execCommand('copy'); document.getElementById('cb_input').remove(); layui.layer.tips(`复制成功 : ${text}`,dom) if(callback) {callback(text)} } </script> ``` ## 第二种 使用这个:[https://github.com/zenorocha/clipboard.js](https://github.com/zenorocha/clipboard.js) 引入这个插件的js, 最后修改:2021 年 12 月 29 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏