最近在开发中,使用原生js复制时,发现在360 7.1的低版本中无法实现代码的复制,
随后便网上找了插件实现复制功能,检验后,发现在低版本也支持
demo:
<input id="contents" type="text" value="" style="position: relative;z-index: -9999 ">
<button class="ydCopy" @click="copyUri" data-clipboard-action="copy" data-clipboard-target="#contents">复制链接</button>
id为contents的input输入框是作为复制的目标对象,button作为点击按钮,图中button使用了vue,
js脚本中
copyUri: function () { /*var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 (全选) document.execCommand("Copy"); //执行浏览器复制命令*/
var clipboard = new ClipboardJS('.ydCopy'); clipboard.on('success', function(e) { common.layer.msg("链接复制成功!"); }); clipboard.on('error', function(e) { layer.alert('链接复制失败,请手动复制下载地址:<br/> <span style="color: blue;">' + $('#contents').val() + '</span>', { skin: 'layui-layer-molv' //样式类名 ,closeBtn: 0 }, function(){ layer.closeAll(); }); });}
三行代码解决!(引入clipboard.js 文件)
clipboard.js源码地址:https://github.com/zenorocha/clipboard.js
里面的demo模块中有具体的例子,简单且实用