Clipboard.js实现点击自动复制内容的功能

1. 点击非文本框，自动复制，代码如下

value:<spanid="bar"class="btn"data-clipboard-target="#bar">value</span>
<scriptsrc="clipboard.min.js"></script>
<script>//initvarclipboard= newClipboard('.btn');//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success',function(e) {alert('复制成功!');e.clearSelection();});clipboard.on('error',function(e) {alert('请选择“拷贝”进行复制!')});</script>

　　2. 点击按钮，复制文本框内容，代码如下

<!--Target-->
<inputid="bar"value="Mussum ipsum cacilds...">
<!--Trigger-->
<buttonclass="btn"data-clipboard-action="cut"data-clipboard-target="#bar">Cut to clipboard</button>
<scriptsrc="clipboard.min.js"></script>
<script>//initvarclipboard= newClipboard('.btn');//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success',function(e) {alert('复制成功!');e.clearSelection();});clipboard.on('error',function(e) {alert('请选择“拷贝”进行复制!')});</script>

　　3. 点击按钮，复制html代码（new 对象的时候为其赋值即可），代码如下

<buttontype="button"class="btn btn-default embedAddress"data-clipboard-action="copy"onclick="copyEmbed()">复制地址</button><textareaid="embedAddrModel"style="display: none;"><iframeid="fram"height="428px"width="800px"frameborder="0"scrolling="no"allowfullscreen="true"webkitallowfullscreen="true"mozallowfullscreen="true"oallowfullscreen="true"msallowfullscreen="true"src="网址"></iframe>
</textarea>function copyEmbed() {var clipboard = new Clipboard('.btn',{text: function (trigger) {var html = document.getElementById('embedAddrModel').innerHTML;for (var i = 0; i<2; i ++){html= html.replace('&lt;','<');html= html.replace('&gt;','>');}return html;}});clipboard.on('success',function (e) {alert("复制成功");e.clearSelection();clipboard.destroy();});clipboard.on('error',function (e) {alert("复制失败,请重新复制");clipboard.destroy();});}

　　 复制HTML，可以将HTML代码放到textarea中，防止页面解析此段代码；但是获取的HTML代码中的“<”，“>”会被解析成‘&lt;’,'&gt;'，所以需要将其转换回去；

　　 如果HTML代码执行的话，可以不放到textarea中，这样就不用转换HTML代码中的‘<’，‘>’,复制的就是所需的代码。

　　参考文档