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 相关文章推荐
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python实现简单登陆流程的方法
2018/04/22 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
COSETTE官网:奢华,每天
2020/03/22 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
如何开发一个JQuery插件
2016/07/28 面试题
行政文员岗位职责
2013/11/08 职场文书
毕业生自荐书
2014/02/03 职场文书
厂长岗位职责
2014/02/19 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
宿舍管理制度范本
2015/08/07 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
Python Matplotlib绘制动画的代码详解
2022/05/30 Python