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

发布时间：2018-05-13作者：laosun阅读（2711）

网站文章中含有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>