Clipboard.js实现点击自动复制内容的功能
点击非文本框,自动复制,代码如下value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span><script src="clipboard.min.js"></script><script>//initvar clipboard = new Clipboard('.btn');//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制 clipboard.on('success', function(e) {alert('复制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('请选择“拷贝”进行复制!')});</script>
2. 点击按钮,复制文本框内容,代码如下
<!-- Target --><input id="bar" value="Mussum ipsum cacilds..."><!-- Trigger --><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard</button><script src="clipboard.min.js"></script><script>//initvar clipboard = new Clipboard('.btn');//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制 clipboard.on('success', function(e) {alert('复制成功!');e.clearSelection();});clipboard.on('error', function(e) {alert('请选择“拷贝”进行复制!')});</script>
3. 点击按钮,复制html代码(new 对象的时候为其赋值即可),代码如下
<button type="button" class="btn btn-default embedAddress" data-clipboard-action="copy" onclick="copyEmbed()">复制地址</button><textarea id="embedAddrModel" style="display: none;"><iframe id="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('<','<');html = html.replace('>','>');}return html;}});clipboard.on('success',function (e) {alert("复制成功");e.clearSelection();clipboard.destroy();});clipboard.on('error',function (e) {alert("复制失败,请重新复制");clipboard.destroy();});}
复制HTML,可以将HTML代码放到textarea中,防止页面解析此段代码;但是获取的HTML代码中的“<”,“>”会被解析成‘<’,'>',所以需要将其转换回去;
如果HTML代码执行的话,可以不放到textarea中,这样就不用转换HTML代码中的‘<’,‘>’,复制的就是所需的代码。
参考文档