JS复制对应id的内容到粘贴板(Ctrl+C效果)

前言

创新互联主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务扶沟,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url。一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西。后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦。

最后翻到了一个js封装好的方法,有效!

想要实现的一个效果是,下面html代码:


 
 复制文件链接
 
 
 

点击复制文件链接这个按钮,复制input框里的value值,是传进去的一个url;首先点击a标签会触发getUrl这个函数;传进去id用于找到对应的input然后取值(因为遍历了多个td,有许多个input框一一对应去取)。

下面js代码:

getUrl中调用了封装好的copyToClipboard方法实现了功能。有一点的是html中input的样式用进行隐藏,因为不知道为什么用type="hiden"或者display="none"去隐藏都只会获取源代码而不是动态的url遍历出来的值。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。


网页名称:JS复制对应id的内容到粘贴板(Ctrl+C效果)
标题链接:http://bzwzjz.com/article/ijghjs.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 品牌网站建设 重庆外贸网站建设 网站建设改版 温江网站设计 成都网站建设 网站制作 营销网站建设 企业手机网站建设 移动网站建设 成都网站设计公司 外贸网站建设 做网站设计 高端网站设计 企业网站建设公司 手机网站建设 成都网站建设 成都品牌网站建设 成都网站建设 成都网站制作 网站设计制作 成都网站建设流程