无需 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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
javascript 常用功能总结
Mar 18 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 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教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
基于Python pip用国内镜像下载的方法
2018/06/12 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
上海期货面试题
2014/01/31 面试题
服务员岗位责任制
2014/02/11 职场文书
调解协议书
2014/04/16 职场文书
保研推荐信
2014/05/09 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
员工评语范文
2014/12/31 职场文书
小学生交通安全寄语
2015/02/27 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2016新年年会主持词
2015/07/06 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang