不依赖Flash和任何JS库实现文本复制与剪切附源码下载
更新时间：2015年10月09日 11:45:24 投稿：mrr
本篇文章给大家分享的文本复制与剪切板功能，实现此功能不依赖falsh插件和任何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/demo/clipboard/">
<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库实现文本复制与剪切附源码下载，希望大家喜欢。
相关文章
随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。下面这篇文章主要给大家介绍了关于利用Javascript实现一套自定义事件机制的相关资料，需要的朋友可以参考下。2017-12-12
这篇文章主要介绍了Javascript图片无缝滚动的相关内容,感兴趣的小伙伴们可以参考一下2015-12-12
JavaScript高级程序设计 阅读笔记（十七） js事件
IE中是冒泡型事件，即从最特定的事件目标到最不特定的事件目标2012-08-08
这篇文章主要介绍了js实现表单项的全选、反选及删除操作,结合实例形式分析了基于dedecms后台使用js实现表单项的全选、反选及删除相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了JS实现先显示大图后自动收起显示小图的广告代码,涉及javascript页面元素属性的操作及数学运算技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
手风琴效果的导航想必大家都有见到过吧，实现的方法也有很多，在本文为大家介绍下使用原生js简单实现下，感兴趣的朋友不要错过2013-11-11
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题,并且做了一系列的设想，代码部分不是很多，我直接写了个示例， 感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
这篇文章主要为大家详细介绍了用JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家介绍了通过babel操作AST精准插入配置代码的全流程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步2022-02-02
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用）。下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。2017-01-01
最新评论