我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过js依靠flash，甚至借助jquery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。
运行效果图：
HTML
首先加载本地clipboard.js文件。
<script src="clipboard.min.js"></script>
然后就是在body中加上要复制或剪切的文本域内容以及按钮。
<input id="foo" value="http://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
将以下一句代码加入到
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
716
