js实现点击后将文字或图片复制到剪贴板的方法


Posted in Javascript onAugust 04, 2014

本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示:

实现复制文字代码:

<table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> 
  <tr> 
  <th width="100%" style="color: white;"><s:text name="询单明细"></s:text></th> 
  </tr> 
 <tr> 
  <td align="center">  
   <textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60" readonly="readonly"></textarea> 
    <div id="inquiryInfoDIV" style="display:none"> 
      <s:property value="inquiryContact" escape="false"/> 
    </div> 
    <script>     dojo.byId("inquiryContact1").innerText=dojo.byId("inquiryInfoDIV").innerText; 
   </script> 
  </td> </tr> 
 <tr> 
  <td align="center"> 
   <input type="button" id="button" name="button" value="复制" onclick="copyContact()"/> 
  </td> </tr> </table> 
 

<script type="text/javascript"> 
  var i = 0 ;  
  function copyContact(){ 
    var contat = document.getElementById("inquiryContact1").value; 
    window.clipboardData.setData('text', contat); 
    if(window.clipboardData.getData('text')==''){ 
      if(i==1){ 
        alert("复制失败,请手动Ctrl+C快捷键复制!"); 
      }else{ 
        alert("复制失败,请重新复制!"); 
        i = 1; 
      } 
    }else{ 
       alert("内容已经复制到剪贴板!"); 
    } 
  } 
</script>

实现复制图片代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<SCRIPT LANGUAGE="JScript"> 
var oPopup = window.createPopup(); 
function ButtonClick(div) 
{ 
//var div = document.getElementById('divId'); 
div.contentEditable = 'true'; 
var controlRange; 
if (document.body.createControlRange) { 
controlRange = document.body.createControlRange(); 
controlRange.addElement(div); 
controlRange.execCommand('Copy'); 
} 
div.contentEditable = 'false'; 
} 
</SCRIPT> 
</head> 
<body> 
  <div id="divId1"> 
    <img src="F:/2012070518474964.jpg" onclick="ButtonClick(this)"> 
  </div> 
</BODY> 
</body> 
</html>

感兴趣的读者可以测试自己测试一下代码,或者对其功能进行修改和完善!

Javascript 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
浅谈javascript的分号的使用
May 12 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
详解vue 模版组件的三种用法
Jul 21 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
JavaScript中的函数重载深入理解
Aug 04 #Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 #Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 #Javascript
js实现正方形颜色从下往上升的效果
Aug 04 #Javascript
与Math.pow 相反的函数使用介绍
Aug 04 #Javascript
简单易用的倒计时js代码
Aug 04 #Javascript
javascript中with()方法的语法格式及使用
Aug 04 #Javascript
You might like
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
用matplotlib画等高线图详解
2017/12/14 Python
详解python中的线程
2018/02/10 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
实习单位鉴定评语
2014/04/26 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers
python读取mat文件生成h5文件的实现
2022/07/15 Python