微信中点击复制内容
主角是clipboard.js它是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
clipboard复印内容的方式有
- 从target复印目标内容
- 通过function 要复印的内容
- 通过属性返回复印的内容
本人使用的是直接DIV复制内容
亲测支持微信内点击文本直接复制，这个主要是为了复制马大哥给的红包
既然是JS插件了，那么必须要先引入JS文件才行了
|
1 |
<script src="__PUBLIC_JS__/clipboard.min.js"></script> |
|
1 |
<div class="xuanfu" id="hongbao" data-clipboard-action="copy" data-clipboard-target="#hongbao">支付宝红包！复制这段话，然后打开支付宝，会直接出来红包，直接领取即可！Jx1meX42RY每天都可以领取！</div> |
|
1 |
CSS样式内容：#hongbao{position: fixed;bottom: 0;width: 100%;z-index: 100;background: #FFF; padding: 10px;line-height: 190%;color:#ff0000} |
最后是JS内容：
|
1 2 3 4 5 6 7 8 9 |
var clipboard = new Clipboard('.xuanfu'); clipboard.on('success', function(e){ console.log(e); layer.msg('复制成功,请打开支付宝',{time:3000,icon:1}); //document.getElementById('hongbao').innerHTML = ''; }); clipboard.on('error', function(e){ layer.msg('复制失败，请长按复制',{time:3000,icon:2}); }); |
这样几步下来，就可以实现在任何地方都可以点击复制内容了，是不是又方便了很多呢？
这个之前主要是流行于淘宝客中，剩下来的扩展就看您的思路了！
除特别注明外，本站所有文章均为电信物联卡官网原创，转载请注明出处来自https://blog.21863.cn/post/312.html
