不依赖Flash和任何JS库实现文本复制与剪切附源码下载


Posted in Javascript onOctober 09, 2015

效果图如下:

不依赖Flash和任何JS库实现文本复制与剪切附源码下载

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

查看演示 下载源码

HTML

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

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

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

<input id="foo" value="https://3water.com/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库实现文本复制与剪切附源码下载,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 #Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 #Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php Calender(日历)代码分享
2014/01/03 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
使用Django清空数据库并重新生成
2020/04/03 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
车工岗位职责
2013/11/26 职场文书
暑期实践思想汇报
2014/01/06 职场文书
六十大寿答谢词
2014/01/12 职场文书
工作决心书范文
2014/03/11 职场文书
运动员入场前导词
2015/07/20 职场文书