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 QueryString解析类代码
Jan 17 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
js实现九宫格布局效果
May 28 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
php xml文件操作代码(一)
2009/03/20 PHP
PHP 强制下载文件代码
2010/10/24 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
python之Socket网络编程详解
2016/09/29 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
Anaconda入门使用总结
2018/04/05 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
租房协议书样本
2014/08/20 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2015年检验科工作总结
2015/04/27 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
MySQL学习之基础操作总结
2022/03/19 MySQL