效果图如下：
我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。
查看演示下载源码
HTML
首先加载本地clipboard.js文件。
复制代码 代码如下:
然后就是在body中加上要复制或剪切的文本域内容以及按钮。
复制代码 代码如下:
这里，我们使用了HTML5的data-属性，用来定位复制对象目标，它指向了文本域#foo，说明复制的是#foo中的value内容，aria-label属性定义了复制成功后的信息，用来提示复制结果信息。
还有个属性data-clipboard-action，它定义当前操作是复制还是剪切，默认是复制，当data-clipboard-action="cut"，这时，点击按钮将会剪切文本，跟WORD操作一样。当然，剪切操作仅适用于text和textarea。
我们也可以不需要input和textarea等元素内容作为复制对象，我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上，点击按钮就可以复制到ata-clipboard-text对应的内容。
复制代码 代码如下:
Javascript
将以下一句代码加入到
前的里，保存打开浏览，点击按钮即可复制。
new Clipboard('.btn');
当然我们可以再进一步处理，比如当复制完成后，提示复制成功信息更友好些，只要执行以下代码即可：
var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { var msg = e.trigger.getAttribute('aria-label'); alert(msg); e.clearSelection(); });
以上内容就是小编跟大家分享的不依赖Flash和任何JS库实现文本复制与剪切附源码下载，希望大家喜欢。
您可能感兴趣的文章:
- JS基于clipBoard.js插件实现剪切、复制、粘贴
- clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
- 简单实现兼容各大浏览器的js复制内容到剪切板
- JS将制定内容复制到剪切板示例代码
- JS复制内容到剪切板的实例代码(兼容IE与火狐)
- js复制到剪切板的实例方法
- JavaScript实现复制或剪切内容到剪贴板功能的方法
以上就是不依赖Flash和任何JS库实现文本复制与剪切附源码下载的详细内容，更多请关注本站其它相关文章！
