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 Global对象
Aug 13 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 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
解析php5配置使用pdo
2013/07/03 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
javascript 常用功能总结
2012/03/18 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
js实现简单进度条效果
2020/03/25 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
使用pandas读取文件的实现
2019/07/31 Python
python复合条件下的字典排序
2020/12/18 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
Noon埃及:埃及在线购物
2019/11/26 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
早读迟到检讨书
2014/01/24 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
岗位说明书标准范本
2014/07/30 职场文书
七夕活动策划方案
2014/08/16 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书