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

 更新时间:2017年01月23日 14:53:16   作者:锅子博客  
这篇文章主要给大家介绍了利用JS实现复制指定对应id的内容到粘贴板(Ctrl+C效果),文中给出了详细的介绍和示例代码,有需要的朋友可以参考借鉴,下面来一起看看吧。

前言

最近在做一个按钮,实现的效果是当点击后复制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设计模式之迭代器模式

    这篇文章主要为大家详细介绍了javascript设计模式之迭代器模式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS实现跟随鼠标立体翻转图片的方法

    JS实现跟随鼠标立体翻转图片的方法

    这篇文章主要介绍了JS实现跟随鼠标立体翻转图片的方法,涉及javascript操作图片翻转的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • js实现点小图看大图效果的思路及示例代码

    js实现点小图看大图效果的思路及示例代码

    点小图看大图的效果想必很多的朋友都有见到过吧,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-10-10
  • js实现旋转木马效果

    js实现旋转木马效果

    本文主要介绍了js实现旋转木马效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • ES6中的类(Class)示例详解

    ES6中的类(Class)示例详解

    这篇文章主要给大家介绍了关于ES6中类(Class)的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Javascript前端下载后台传来的文件流代码实例

    Javascript前端下载后台传来的文件流代码实例

    这篇文章主要介绍了Javascript前端下载后台传来的文件流代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js实现点击每个li节点,都弹出其文本值及修改

    js实现点击每个li节点,都弹出其文本值及修改

    本篇文章主要分享了js实现点击每个li节点,都弹出其文本值及修改的实例代码,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • js中的replace方法使用介绍

    js中的replace方法使用介绍

    replace() 方法用于将字符串用一些字符替换另一些字符,如果用正则表达式替换时, regexp 具有全局标志 g,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-10-10
  • JS技巧Canvas性能优化脏矩形渲染实例详解

    JS技巧Canvas性能优化脏矩形渲染实例详解

    这篇文章主要为大家介绍了JS技巧Canvas 性能优化脏矩形渲染实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 详解ECMAScript6入门--Class对象

    详解ECMAScript6入门--Class对象

    本篇文章主要介绍了详解ECMAScript6入门--Class对象,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论