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调试工具Console命令详解
Oct 21 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
原生JS实现汇率转换功能代码实例
May 13 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
PHP实现文件安全下载
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
javascript定时变换图片实例代码
2013/03/17 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python实现简单flappy bird
2018/12/24 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
实习单位接收函
2014/01/11 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技