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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Vue组件基础用法详解
Feb 05 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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/12/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
解决python 输出是省略号的问题
2018/04/19 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python实现验证码识别
2020/06/15 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
入党积极分子介绍信
2014/01/17 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
基层党员公开承诺书
2014/05/29 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python