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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
vue实现跨域的方法分析
May 21 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
微信小程序实现拍照和相册选取图片
May 09 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针对cookie操作的队列操作类实例
2014/12/10 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript学习指南之回调问题
2016/04/23 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解js中==与===的区别
2017/01/08 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
vue的mixins属性详解
2018/03/14 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
Python 自动补全(vim)
2014/11/30 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python编程中类与类的关系详解
2019/08/08 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
出国留学介绍信
2014/01/13 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
小班幼儿评语大全
2014/04/30 职场文书
团支部建设方案
2014/05/02 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
Python数据类型最全知识总结
2021/05/31 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
SpringBoot Http远程调用的方法
2022/08/14 Java/Android