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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
javascript中的隐式调用
Feb 10 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python itertools.product方法代码实例
2020/03/27 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python中类与对象之间的关系详解
2020/12/16 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
美国美妆网站:B-Glowing
2016/10/12 全球购物
Champion官网:美国冠军运动服装
2017/01/25 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
三万活动总结
2014/04/28 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
超市员工辞职信范文
2015/05/12 职场文书
七年级英语教学反思
2016/02/15 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python