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 相关文章推荐
javascript判断非数字的简单例子
Jul 18 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
template.js前端模板引擎使用详解
Oct 10 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
JS回调函数深入理解
Oct 16 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
极典R601SW收音机
2021/03/02 无线电
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python自动生产表情包
2017/03/17 Python
Python 多核并行计算的示例代码
2017/11/07 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
性能测试工程师的面试题
2015/02/20 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
安全教育的主题班会
2015/08/13 职场文书
调研报告的主要写法
2019/04/18 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js