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

公告

View Post

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

1先引入

2在加载函数里设置

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

3html中有个coypy按钮

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>

posted on 2017-11-21 17:34 凉梁凉糕阅读(1668) 评论(0) 收藏举报

刷新页面返回顶部