clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切


Posted in Javascript onOctober 10, 2015

我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js。

运行效果图:

 clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

HTML
首先加载本地clipboard.js文件。

<script src="clipboard.min.js"></script>

然后就是在body中加上要复制或剪切的文本域内容以及按钮。

<input id="foo" value="https://3water.com/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库实现文本复制与剪切实现过程,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 #Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 #Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
图书管理程序(一)
2006/10/09 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python-numpy-指数分布实例详解
2019/12/07 Python
python 函数中的参数类型
2020/02/11 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
建筑工地文明标语
2014/10/09 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
六年级语文教学反思
2016/03/03 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers