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 this用法小结
Dec 19 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Vue跨域请求问题解决方案过程解析
Aug 07 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中使用灵巧的体系结构
2006/10/09 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP中的session安全吗?
2016/01/22 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python使用scrapy解析js示例
2014/01/23 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python命令行工具Click快速掌握
2019/07/04 Python
解决python flask中config配置管理的问题
2019/07/26 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
《鹬蚌相争》教学反思
2014/04/22 职场文书
效能监察建议书
2014/05/19 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
前台岗位职责范本
2015/04/16 职场文书
学前教育见习总结
2015/06/23 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书