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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
建立动态的WML站点(三)
2006/10/09 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHP 实现链式操作
2021/03/09 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python求众数问题实例
2014/09/26 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python抽象基类用法实例分析
2015/06/04 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
请解释在new与override的区别
2012/10/29 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
教师师德教育的自我评价
2013/10/31 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
海底两万里读书笔记
2015/06/26 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
DSP接收机前端设想
2022/04/05 无线电
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript