js、jquery 复制内容到粘贴板,clipboard(兼容各大浏览器,不需要引入swf)

发布时间:2018-05-13作者:laosun阅读(814)

js、jquery

    image.png

    网站文章中含有pre的代码显示,所以少不了高亮、复制或者打开窗口显示等等插件的配合.

    那么打开窗口显示,博主已经发过一篇文章了,window.open弹出空页面,pre代码复制窗口,不创建页面也能显示信息

    那么复制到粘贴板怎么做呢,其实现在有很多现成的插件,博主发现了一个比较好用的 clipboard

    打开官网下载,在网站引入一个js文件即可。

    <script src="${ctx!}/assets/js/clipboard.min.js"></script>

    使用方式如下:

    $(document).ready(function(){
    	var clipboard =  new ClipboardJS("#copypre", {
    	    text: function(trigger) {
    	    	//var content = bCon($(trigger));
    	        //return content;
    	        return "这是复制的内容,秘密!!!";
    	    }
    	});
    	clipboard.on('success', function(e) {
    	    alert("复制成功");
    	    e.clearSelection();
    	});
    	clipboard.on('error', function(e) {
    	    alert("复制失败");
    	});
    });


    为了方便大家更好的进行测试学习,博主做了两个例子:

        <button class="btn_text2">点击复制2</button>
        <script>
        var clipboard2 =  new ClipboardJS(".btn_text2", {
    	    text: function(trigger) {
    	        return "啊,进去了2";
    	    }
    	});
    	clipboard2.on('success', function(e) {
    	    alert("复制成功2");
    	    e.clearSelection();
    	});
    	clipboard2.on('error', function(e) {
    	    alert("复制失败2");
    	});
        </script>
        
        
        
        
        
        <input type="text" id="val" value="啊,进去了3"/>
        <button class="btn_text3" data-clipboard-target="#val">点击复制3</button>
        <script>
        var clipboard3 =  new ClipboardJS(".btn_text3");
    	clipboard3.on('success', function(e) {
    	    alert("复制成功3");
    	    e.clearSelection();
    	});
    	clipboard3.on('error', function(e) {
    	    alert("复制失败3");
    	});
        </script>


0 +1

版权声明

 jquery  前端  源码  开源  javascript

 请文明留言

0 条评论