• js 实现复制粘贴时注意方法中需要两次点击实现的bug


    方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm

    1先引入

       <script type="text/javascript" src="../plugins/ZeroClipboard/ZeroClipboard.js"></script>

    2在加载函数里设置

      ZeroClipboard.setMoviePath( "../plugins/ZeroClipboard/ZeroClipboard.swf" );

    3html中有个coypy按钮

      <button id="copybtn">Copy</button>

    4 绑定函数:

    $('#copyurlbtn').click(function (e) {
                e.preventDefault();
                var clip = new ZeroClipboard.Client(); // 新建一个对象
                var temp = postUrl;
                clip.setHandCursor( true );
                clip.setText(temp); // 设置要复制的文本。
                // 注册一个 button,参数为 id。点击这个 button 就会复制。
                //这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
                clip.glue("copyurlbtn"); // 和上一句位置不可调换
                clip.addEventListener( "mouseUp", function(client) {
                    $.messager.alert("Notice","Copy Success");
                });

    上面这样做有个最大的问题就是每次进入页面需要点击两次按钮才可以进行复制成功,是因为ZeroClipboard需要再页面初始化的时候加载。

    我们可以如下方式实现:

     ZeroClipboard.setMoviePath( "../plugins/ZeroClipboard/ZeroClipboard.swf" );
        var clip = null;
     $(document).ready(function() {
    //     copyUrl的实现
            clip = new ZeroClipboard.Client(); // 新建一个对象
            clip.setHandCursor( true );
            clip.setText(‘text for copy’); // 设置要复制的文本。
            // 注册一个 button,参数为 id。点击这个 button 就会复制。
            //这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。
            clip.glue("copyurlbtn"); // 和上一句位置不可调换
            clip.addEventListener( "complete", function() {
                $.messager.alert("Notice","Copy Success");
            });
    
    
    }

     方法二:

    使用 clipboard ,上面copy的方法依赖flash,较为复杂,下面介绍一种纯js copy的实现,详见https://www.cnblogs.com/52fhy/p/5383813.html
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>copyjs</title>
        <script src="./clipboard.min.js"></script>
    </head>
    
    <body>
        <div class="box1">
            <button id="btn" class="js-copy" data-clipboard-text="copyed content">
                Cut to clipboard
            </button>
        </div>
        <div class="box">
            <input id="foo" value="text for copy">
            <!-- Trigger -->
            <button id="btn" data-clipboard-target="#foo">
                <img src="assets/clippy.svg" alt="Copy to clipboard">
            </button>
        </div>
        <script>
            var btn1 = document.getElementById('btn1');
            var clipboard1 = new Clipboard(btn1);//实例化
            //复制成功执行的回调,可选
            clipboard1.on('success', function(e) {
                console.log(e);
            });
            //复制失败执行的回调,可选
            clipboard1.on('error', function(e) {
                console.log(e);
            });
    
            var btn = document.getElementById('btn');
            var clipboard = new Clipboard(btn);//实例化
            clipboard.on('success', function(e) {
                console.log(e);
            });
            clipboard.on('error', function(e) {
                console.log(e);
            });
        </script>
    </body>
    
    </html>
    

      

     
  • 相关阅读:
    内部类&匿名内部类
    Object:
    多 态★★★★★(面向对象特征之三)
    接 口:
    继 承(面向对象特征之二)
    封 装(面向对象特征之一)
    三:面向对象:★★★★★
    Codeforces 719 E. Sasha and Array (线段树+矩阵运算)
    uestc oj 1218 Pick The Sticks (01背包变形)
    uestc oj 1217 The Battle of Chibi (dp + 离散化 + 树状数组)
  • 原文地址:https://www.cnblogs.com/xhliang/p/7874397.html
Copyright © 2020-2023  润新知