不依赖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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
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自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python基础教程之自定义函数介绍
2014/08/29 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python处理session的方法整理
2019/08/29 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python RSA加密的示例
2020/12/09 Python
火车的故事教学反思
2014/02/11 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
出生证明格式
2015/06/15 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Hive导入csv文件示例
2022/06/25 数据库