ITPub博客

首页 > IT职业 > IT图书 > JS点击图片后其地址自动复制到剪贴板

JS点击图片后其地址自动复制到剪贴板

原创 IT图书 作者:chunzhisu 时间:2014-09-26 10:38:16 0 删除 编辑

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <title>JS点击图片后其地址自动复制到剪贴板_石家庄地毯</title>
  5. <style type=\"text/css\">
  6.  #info_hidden {
  7.   position:absolute;
  8.   visibility:hidden;
  9.  }
  10.  img {
  11.   cursor:pointer ;
  12.  }
  13. </style>
  14. </head>
  15. <body>
  16.  <div id=\"imgs\">
  17.   <img src=\"http://www.webdm.cn/images/wall1_s.jpg\">
  18.   <img src=\"http://www.webdm.cn/images/wall3_s.jpg\">
  19.  </div>
  20.  <span id=\"info_hidden\"></span>
  21. </body>
  22. <script type=\"text/javascript\">
  23. <!--
  24.  $id=function(id) {
  25.   return document.getElementById(id);
  26.  }
  27.  var objs =$id(\"imgs\").getElementsByTagName(\"img\") ;
  28.  for (var i=0;i
  29.   objs[i].onclick=function () {
  30.    $id(\"info_hidden\").innerHTML=this.src ;
  31.    var my_range =document.body.createTextRange() ;
  32.    my_range.moveToElementText($id(\"info_hidden\"));
  33.    my_range.execCommand(\"copy\");
  34.    alert(\"已成功复制到剪贴板\");
  35.    return false ;
  36.   }
  37.  }
  38. //-->
  39. </script>
  40. <br />

  41. </html>



来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29737856/viewspace-1281411/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-07-04

  • 博文量
    95
  • 访问量
    122221