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


Posted in Javascript onJanuary 23, 2017

前言

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

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

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

<tr>
 <td>
 <a id="copy_{$key}" onclick="getUrl('{$key}')">复制文件链接</a>
 <input id="file_{$key}" value="{$file.file_url}" style="margin-left: -9999px"/>
 </td>
</tr>

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

下面js代码:

<pre><script type="application/javascript">
 
 function getUrl(id) {
  if (copyToClipboard(document.getElementById("file_"+id))){
   alert("成功复制到黏贴板!");
  }else{
   alert("复制到黏贴板失败!");
  }
 }
 
 function copyToClipboard(elem) {
  // create hidden text element, if it doesn't already exist
  var targetId = "_hiddenCopyText_";
  var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
  var origSelectionStart, origSelectionEnd;
  if (isInput) {
   // can just use the original source element for the selection and copy
   target = elem;
   origSelectionStart = elem.selectionStart;
   origSelectionEnd = elem.selectionEnd;
  } else {
   // must use a temporary form element for the selection and copy
   target = document.getElementById(targetId);
   if (!target) {
    var target = document.createElement("textarea");
    target.style.position = "absolute";
    target.style.left = "-9999px";
    target.style.top = "0";
    target.id = targetId;
    document.body.appendChild(target);
   }
   target.textContent = elem.textContent;
  }
  // select the content
  var currentFocus = document.activeElement;
  target.focus();
  target.setSelectionRange(0, target.value.length);
 
  // copy the selection
  var succeed;
  try {
   succeed = document.execCommand("copy");
  } catch(e) {
   succeed = false;
  }
  // restore original focus
  if (currentFocus && typeof currentFocus.focus === "function") {
   currentFocus.focus();
  }
 
  if (isInput) {
   // restore prior selection
   elem.setSelectionRange(origSelectionStart, origSelectionEnd);
  } else {
   // clear temporary content
   target.textContent = "";
  }
  return succeed;
 }
</script></pre>

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

总结

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

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 #Javascript
Node.js Express 框架 POST方法详解
Jan 23 #Javascript
js 颜色选择插件
Jan 23 #Javascript
JavaScript常用正则函数用法示例
Jan 23 #Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 #Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 #Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
json简单介绍
2008/06/10 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python操作gmail实例
2015/01/14 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
详解python中的json的基本使用方法
2016/12/21 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
白酒业务员岗位职责
2013/12/27 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
毕业生自荐信范文
2015/03/05 职场文书
同意转租证明
2015/06/24 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫