不依赖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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
老生常谈的跨域处理
Jan 11 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
WordPress网站性能优化指南
2015/11/18 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python 实现归并排序算法
2012/06/05 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
python logging设置level失败的解决方法
2020/02/19 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
小学开学寄语
2014/01/19 职场文书
教师节促销活动方案
2014/02/14 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
家长会欢迎词
2015/01/23 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书