首页 > 编程 > JavaScript > 正文

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

2019-11-19 17:47:48
字体:
来源:转载
供稿:网友

前言

最近在做一个按钮,实现的效果是当点击后复制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遍历出来的值。

总结

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表