无需 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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
javascript实现行拖动的方法
May 27 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 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 float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
DEFER怎么用?
2006/07/01 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
关于vue面试题汇总
2018/03/20 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
Python中的zip函数使用示例
2015/01/29 Python
查看python下OpenCV版本的方法
2018/08/03 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
关于python多重赋值的小问题
2019/04/17 Python
python 实现生成均匀分布的点
2019/12/05 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
python爬虫 requests-html的使用
2020/11/30 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
后勤自我鉴定
2013/10/13 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
主题酒店策划书
2014/01/28 职场文书
会计电算化专业求职信
2014/06/10 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
机关工会工作总结2015
2015/05/26 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android