复制地址.    复制HTML,可以将HTML代码放到textarea中,防止页面解析此段代码;但是获取的HTML代码中的“<”,“>”会被解析成‘<" />

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

来源:博客园 分类: 文章浏览史 发布时间:2020-11-06 23:32:09 最后更新:2020-11-06 浏览:125
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-11-06 23:32:09

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

  1. 点击非文本框,自动复制,代码如下
复制代码
value:<span id="bar" class="btn" data-clipboard-target="#bar">value</span>
<script src="clipboard.min.js"></script>
<script>
    //init
    var 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>
    //init
    var 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('&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代码中的‘<’,‘>’,复制的就是所需的代码。

 

  参考文档

php技术微信