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


    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代码中的‘<’,‘>’,复制的就是所需的代码。

      参考文档

    有罪是符合人性的,但长期坚持不改就是魔鬼。
  • 相关阅读:
    处理不均衡数据 (Imbalanced data)
    过拟合 (Overfitting)
    加速神经网络训练 (Speed Up Training)
    Python3 S.join() 个人笔记
    OpenCV中的图像形态学转换
    OpenCV中的绘图函数
    OpenCV中图像的BGR格式及Img对象的属性说明
    OpenCV中图像的读取,显示与保存
    msyql-02
    jumpserver的快速部署
  • 原文地址:https://www.cnblogs.com/yu-yuan/p/9627048.html
Copyright © 2020-2023  润新知