不依赖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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
基于vue的video播放器的实现示例
Feb 19 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
深入浅析python继承问题
2016/05/29 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Django之模型层多表操作的实现
2019/01/08 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
考试不及格的检讨书
2014/01/22 职场文书
怎样填写就业意向
2014/04/02 职场文书
法律意见书范本
2015/06/04 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js
React更新渲染原理深入分析
2022/12/24 Javascript