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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JS前端基于canvas给图片添加水印
Nov 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
详谈python http长连接客户端
2017/06/12 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python中super函数的用法
2017/11/17 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Django 路由层URLconf的实现
2019/12/30 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
毕业生实习鉴定
2013/12/11 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
学校社会实践活动总结
2014/07/03 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python