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 错误处理与调试经验总结
Aug 10 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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实现定时执行任务的方法
2014/10/05 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
node网页分段渲染详解
2016/09/05 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
实习生自荐信范文
2013/11/13 职场文书
干部培训自我鉴定
2014/01/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android