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文件上传插件Uploadify使用指南
Jun 05 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
js图片上传的封装代码
Aug 01 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
vue动态设置路由权限的主要思路
Jan 13 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Rust中的Struct使用示例详解
Aug 14 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
PHP的PDO事务与自动提交
2019/01/24 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
jQuery操作元素追加内容示例
2020/01/10 jQuery
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
告诉你怎样写创业计划书
2014/01/27 职场文书
产品委托授权书范本
2014/09/16 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Redis实战高并发之扣减库存项目
2022/04/14 Redis