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多重继承示例
Mar 13 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
详解node.js的http模块实例演示
Jul 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php进程间通讯实例分析
2016/07/11 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python如何让类支持比较运算
2018/03/20 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
副总经理岗位职责
2014/03/16 职场文书
财务人员担保书
2014/05/13 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书