博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
兼容性良好的js一键复制
阅读量:6996 次
发布时间:2019-06-27

本文共 1014 字,大约阅读时间需要 3 分钟。

hot3.png

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

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

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

       这里主要介绍下clipboard的使用,地址:

       引入js文件clipboard.min.js。

    
一键复制

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

    
一键复制

在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

你可能感兴趣的文章