不依赖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 相关文章推荐
JS性能优化笔记搜索整理
Aug 21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jquery实现倒计时效果
Dec 14 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python访问系统环境变量的方法
2015/04/29 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python版大富翁源代码分享
2018/11/19 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
电钳工人个人求职信
2014/05/10 职场文书
师德师风剖析材料
2014/09/30 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
死亡证明书样本说明
2014/10/18 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2014年环保工作总结
2014/11/26 职场文书
委托书英文
2015/01/28 职场文书
设备技术员岗位职责
2015/04/11 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis