无需 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 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 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
给php新手谈谈我的学习心得
2007/02/25 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
学习php分页代码实例
2013/10/24 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python实现聊天小程序
2018/03/13 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
详解flask表单提交的两种方式
2018/07/21 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python网络编程之五子棋游戏
2020/05/14 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
What is EJB
2016/07/22 面试题
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server