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 处理事件绑定的一些兼容写法
Dec 24 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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 调试工具Debug Tools
2011/04/30 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
33道php常见面试题及答案
2015/07/06 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
JavaScript触发器详解
2007/03/10 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python3操作mysql数据库的方法
2017/06/23 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
详解python中sort排序使用
2019/03/23 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python程序控制语句用法实例分析
2020/01/14 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
求职简历推荐信范文
2013/12/02 职场文书
学生安全承诺书
2014/05/22 职场文书
转让协议书范本
2014/09/13 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
获奖感言怎么写
2015/07/31 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
JavaScript原型链详解
2021/11/07 Javascript
Python集合set()使用的方法详解
2022/03/18 Python