兼容性良好的js一键复制

最新推荐文章于 2024-01-17 14:53:17 发布

weixin_34050519

最新推荐文章于 2024-01-17 14:53:17 发布

阅读量136

点赞数

文章标签： python git

原文链接：https://my.oschina.net/bothyan/blog/517658

版权

2019独角兽企业重金招聘Python工程师标准>>>

实现js一键复制原生方法里有window.clipboardData.setData，用这个方法并不兼容，只能用于IE浏览器，在别的浏览器中只能让用户手动复制。具体使用如下：

window.clipboardData.setData("Text","你要复制的内容");

网上有很多用ZeroClipboard，用flash实现一键复制的兼容，但是复制粘贴这样的小功能可以不需要依赖flash或其他臃肿的框架。

这里主要介绍下clipboard的使用，地址：https://github.com/zenorocha/clipboard.js.git

引入js文件clipboard.min.js。

<body>    
<!-- Target -->
<input id="target" value="你要复制的内容">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#target">一键复制</button>
<script>
var clipboard = new Clipboard('.btn');
</script>
</body>

上述代码就可以完成一键复制的功能，点击button复制input的值。本人测试若input隐藏就无法复制。当我们要复制不需要显示的文本时。如下

<body>    
<!-- Target -->

<!-- Trigger -->
<button class="btn" data-clipboard-text="">一键复制</button>
<script>
var clipboard  = new Clipboard('.btn',{
    		text:function(trigger) {
		        return "你要复制的内容";
		    }	
    	});
</script>
</body>

在new Clipboard构造函数里，除了像上面函数那样加text属性（目标函数返回要复制的内容）外，还可以加target属性，目标函数返回的是dom节点。这些需要在类名为btn的button上加入data-clipboard-text或者data-clipboard-target属性。

此外clipboard也提供了一些回调函数，成功和失败的回调如下：

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);
      e.clearSelection();
});

转载于:https://my.oschina.net/bothyan/blog/517658