js实现点击图片将图片地址复制到粘贴板的方法

本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法。分享给大家供大家参考。具体如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击图片直接把图片地址复制到粘贴板</title>
<style type="text/css">
 #www_jb51_net_hidden {
  position:absolute;
  visibility:hidden;
 }
 img {
  cursor:pointer ;
 }
</style>
</head>
<body>
点击下面的图片直接获取得地址。
 <div id="jb51_net">
  <img src="images/m10.jpg"><br />
 </div>
 <span id="www_jb51_net_hidden"></span>
</body>
<script type="text/javascript">
<!--
 $id=function(id) {
  return document.getElementById(id);
 }
 var objs =$id("jb51_net").getElementsByTagName("img") ;
 for (var i=0;i<objs.length;i++ ) {
  objs[i].onclick=function () {
   $id("www_jb51_net_hidden").innerHTML=this.src ;
   var my_range =document.body.createTextRange() ;
   my_range.moveToElementText($id("www_jb51_net_hidden"));
   my_range.execCommand("copy");
   alert("图片地址已经复制到剪贴板");
   return false ;
  }
 }
//-->
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 兼容主流浏览器的JS复制内容到剪贴板

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

  • js 复制或插入Html的实现方法小结

    var bq=document.getElementsByTagName("标签或ID名")//ID是唯一无许分组,标签非唯一,有可能返回一个数组. div=document.createElement("div"); ...设置CSS风格 bq.appendChild(div);//ID唯一性的话只需要这样!在bq之后插入div层 bq[0].appendChild(div);//如果前面用的是标签!数组跟下标!在bq之后插入div层 bq.insertBefor

  • Javascript 实现复制（Copy）动作方法大全

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • JS复制对应id的内容到粘贴板（Ctrl+C效果）

    前言 最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url.一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西.后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦. 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr> <td> <a id="copy_{$key}" oncli

  • 网站内容禁止复制和粘贴、另存为的js代码

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码 代码如下: <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> 方法2:

  • JS复制特定内容到粘贴板

    <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("txt"); t.select(); window.clipboardData.setData('text',t.createTextRa

  • 多浏览器兼容性比较好的复制到剪贴板的js代码

    对于非ie浏览器他是用flash来实现的,js代码如下: 复制代码 代码如下: <script type="text/javascript"> function copy_code(copyText) { if (window.clipboardData) { window.clipboardData.setData("Text", copyText) } else { var flashcopier = 'flashcopier'; if(!docum

  • javascript 三种数组复制方法的性能对比

    javascript 三种数组复制方法的性能对比

    一. 三种数组复制方法 1. by slice var arr = [1, 2, 3], copyArr; copyArr = arr.slice(); 2. by concat var arr = [1, 2, 3], copyArr; copyArr = arr.concat(); 3. by loop var arr = [1, 2, 3], copyArr = []; for (var i=0, j=arr.length; i 二. 测试环境 浏览器: IE6+, FF 3.5.5, O

  • js 实现复制到粘贴板的功能代码

    他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

随机推荐