• 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>
    

      

     
  • 相关阅读:
    Vue 多层组件传值(最外层组件>中间组件>最内部组件)
    Vue 父子组件传值 (Vue-cli4)
    CSS HTML 基本知识 盒子模型 Flex等
    Vue---基本知识
    springboot ---邮件和定时任务 和异步
    js中.bind()和.call()用法讲解
    为页内的tab添加的iframe添加加载动画过渡效果
    JMETER学习宝典
    新篇章,新起点
    计划拟定(现阶段)
  • 原文地址:https://www.cnblogs.com/xhliang/p/7874397.html
Copyright © 2020-2023  润新知