无需 Flash 使用 jQuery 复制文字到剪贴板


Posted in Javascript onApril 26, 2016

如果在网上找一个关于如何将一段特定的文本拷贝到剪贴板的解决方案,最可能的结果就是使用Flash的方案来做这个事,虽然使用Flash可以很好地解决这个问题,但是这不是一个明智的想法,因为这个产品最终会消失或者至少是浏览器不再提供支持,因此这个解决方案是没有未来的。虽然可以使用jQuery或者纯JavaScript,甚至完全自己写,但是当有人已经创建了一个解决方案,那么为什么还要重复发明轮子呢?让我们一起看看Clipboard.js吧。

Clipboard.js删除了Flash组件并且优雅地解决了这个问题,需要做的只是引入其脚本,在HTML标签上赋一个“data-clipboard-target”属性然后写一小段JavaScript片段。为了演示假定有一个货币转换应用,在一个文本框中输入数值时同时将兑换结果显示在另一个文本框中,当点击文本框时,会触发事件将其复制到剪贴板然后显示一条消息。 无需 Flash 使用 jQuery 复制文字到剪贴板

下面是我的实现。

假如这是你的文本框。(我使用MVC框架创建我的应用程序)

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

你有没有注意到我有一个 AmountTo和 一个AmountFrom,AmountTo是输入AmountFrom 是输出 ,当我们点击这个的时候其值就会传给剪切板。这个神奇的事情发生在属性“data-clipboard-target”里面。

我们也添加一个消息框用来显示拷贝动作消息

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

到这里就是你所关心的HTML部分。现在让我们去看JavaScript/jQuery 部分

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard('#AmountTo');
clipboard.on('success',function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on('error',function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$('#AmountFrom').click(function(){$("#AmountFrom").val("");});
</script>

至此,会发现我们只是引入了clipoard.js,如果实例化Clipboard成功,然后会给事件赋予一些动作,否则它会触发一个错误,是这样吧?这一切都很好,它能兼容所有最新的浏览器,除了IE,它会给出下面这样的一个消息。

无需 Flash 使用 jQuery 复制文字到剪贴板

如果希望看一下实际的效果,这是一个JSFiddle示例。

接下来就是抓取剪贴板的数据然后当点击时自动地粘贴到一个文本框,至此,看上去浏览器因为一个安全上的风险会阻止它,但是我会尝试找到甚至做出一个方案,因此大家还得继续关注。

Javascript 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
react 项目中引入图片的几种方式
Jun 02 Javascript
JavaScript事件处理的方式(三种)
Apr 26 #Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 #Javascript
jQuery siblings()用法实例详解
Apr 26 #Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 #Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 #Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 #Javascript
Bootstrap网格系统详解
Apr 26 #Javascript
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
DIY实用性框形天线
2021/03/02 无线电
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js静态作用域的功能。
2006/12/25 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python模拟表单提交登录图书馆
2018/04/27 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python class的继承方法代码实例
2020/02/14 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
keras输出预测值和真实值方式
2020/06/27 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
国际政治个人自荐信范文
2013/11/26 职场文书
生物技术专业毕业生求职信范文
2013/12/14 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
九年级体育教学反思
2014/01/23 职场文书
《乡愁》教学反思
2014/02/18 职场文书
食品安全承诺书
2014/05/22 职场文书
庆元旦活动总结
2014/07/09 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis