• js复制功能的有效方法总结新


    一,用js原生的document.execCommand()

    function copy(){
    var Url2=document.getElementById("xjh");
    Url2.select();
    try{
    if(document.execCommand('copy', true, null)){
    document.execCommand("Copy");
    alert("已复制好,可贴粘。");
    } else{
    alert("复制失败,请手动复制");
    }
    } catch(err){
    alert("复制失败,请手动复制");
    }
    }

    兼容性:测试过,兼容IE8以上,谷歌43以上也支持。

    二,用jquery插件


    jquery.zclip.min.js的用法

    jquery.zclip.min.js的作用可用jquery的插件:zclip解决js复制在不同浏览器的支持度。但是前提需要安装flash。

    首先的引用jquery包  

    //网上可以查找下载包
     
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.zclip.min.js"></script>   //导入jquery插件
     
    $(function(){
        $('#copy_input').zclip({
            path: 'js/ZeroClipboard.swf',   //swf文件不能掉,注意:是下载的swf文件。
            copy: function(){//复制内容
                return $('#mytext').val();
            },
            afterCopy: function(){//复制成功
                $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功');
            }
        });
    });
    如果是复制的内容来自输入框input、textarea等,copy对象使用:

    调用方法:
    copy: function(){
        return $('#mytext').val();
    }
     
    //如果是复制的内容来自页面元素div、p之类的,copy对象使用:
    代码如下

     
    copy: $('#mytext').text();

    三,clipboard.js 的使用

    clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件。简单介绍下基本运用。

    1 引入插件

    <pre>
    <script src="js/clipboard.min.js"></script>
    </pre>

    2基本使用

    首先需要您需要通过传递DOM选择器,HTML元素或HTML元素列表来实例化它。
    <pre>
    new Clipboard('.btn');
    </pre>
    1用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
    <pre>

    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">


    <button class="btn" data-clipboard-target="#foo">
    </button>
    </pre>

    另外还有另外一个属性data-clipboard-action属性,以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于<input>或<textarea>元素。
    <pre>

    <textarea id="bar">Mussum ipsum cacilds...</textarea>


    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
    </button>
    </pre>

    2从属性中复制文本,不需要另一个元素当触发器,可以使用data-clipboard-text属性,在后面放上需要复制的文本.
    <pre>
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
    </button>
    </pre>

    3其他说明

    1通过运行检查clipboard.js是否支持Clipboard.isSupported(),返回true则可以使用。
    2显示一些用户反馈或捕获在复制/剪切操作后选择的内容。操作,文本,触发元素
    <pre>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    

    </pre>

    3该插件使用的是事件委托的方式来触发,所以大大减少了对dom的操作。

    4高级使用

    如果你不想修改你的HTML,那么你可以使用一个非常方便的命令API。所有你需要做的是声明一个函数,写下你想要的操作,并返回一个值。下面是一个对不同id的触发器返回不同的值的例子。具体的使用方法请看https://clipboardjs.com
    <pre>
    <body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

    <button id='foo_1' class="btn" data-clipboard-target="#foo">
    </button>
    </body>
    <script>
    new Clipboard('.btn', {
    text: function(trigger) {
    if(trigger.getAttribute('id')=='foo_1'){
    return 1;
    }else{
    return 2;
    }
    }
    });
    </script>
    </pre>



    作者:最爱是荔枝
    链接:https://www.jianshu.com/p/3f8867de041e
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    【洛谷P1119】灾后重建
    【洛谷P1462】通往奥格瑞玛的道路
    【洛谷P1991】无线通讯网
    poj 2892(二分+树状数组)
    hdu 1541(树状数组)
    hdu 5059(模拟)
    hdu 5056(尺取法思路题)
    poj 2100(尺取法)
    hdu 2739(尺取法)
    poj 3320(尺取法)
  • 原文地址:https://www.cnblogs.com/LGDD/p/8242535.html
Copyright © 2020-2023  润新知