clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
更新时间：2015年10月10日 09:15:21 投稿：lijiao
这篇文章主要实现了无需Flash无需依赖任何JS库实现文本复制与剪切，是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，叫clipboard.js，感兴趣的小伙伴们可以参考一下
我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。
运行效果图：
HTML
首先加载本地clipboard.js文件。
<script src="clipboard.min.js"></script>
然后就是在body中加上要复制或剪切的文本域内容以及按钮。
<input id="foo" value="https://www.jb51.net/article/73145.htm"> <button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>
这里，我们使用了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对应的内容。
<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>
Javascript
将以下一句代码加入到</body>前的<script>里，保存打开浏览，点击按钮即可复制。
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库实现文本复制与剪切实现过程，希望对大家的学习有所帮助。
相关文章
suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）
suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）,需要的朋友可以参考下。2011-12-12
这篇文章主要为大家详细介绍了js实现ATM机存取款功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01![javascript最短的拖动代码[兼容FF]](//img.jbzj.com/images/xgimg/bcimg2.png)
javascript最短的拖动代码[兼容FF]...2007-10-10
在前端开发中Webpack已经成为构建现代JavaScript应用的必备工具,它负责模块的打包和优化,这篇文章主要介绍了前端webpack一些常用配置的作用,文中介绍的非常详细,需要的朋友可以参考下2025-04-04
网上关于JS实现汉字和拼音互转的文章很多，但是比较杂乱，有的不支持多音字、不支持声调或者字典文件太大，无法根据实际需要满足需求。这篇文章给大家修正整理网上的几种常见方法，文章结尾还附简单的JS拼音输入法，本文对大家具有一定的参考借鉴价值，下面一起看看吧。2016-10-10
Javascript中暂停功能的实现代码...2007-03-03
javascript jq 弹出提示效果实现的方法有很多，可能会在某些地方看到过，下面为大家演示个示例介绍下如何实现jq 弹出层，感兴趣的朋友可以参考下2013-08-08
这篇文章主要介绍了JS+CSS相对定位实现的下拉菜单,涉及JavaScript结合css的定位技术实现下拉菜单的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
在现代Web开发中,图像处理是一个常见的需求,尤其是为图片添加水印,下面我们就来看看如何使用HTML5的Canvas技术为图片添加水印,需要的可以了解下2024-11-11
本篇文章主要介绍了基于Two.js实现=星球环绕动画效果的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
![javascript最短的拖动代码[兼容FF]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论