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 onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JavaScript中的闭包
Feb 24 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
vue .sync修饰符的使用详解
Jun 15 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
vue-ajax小封装实例
2017/09/18 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python paramiko模块学习分享
2017/08/23 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
业务部主管岗位职责
2014/01/29 职场文书
2014年三万活动总结
2014/04/26 职场文书
高三励志标语
2014/06/05 职场文书
离婚协议书范文2014
2014/10/16 职场文书
校运会新闻稿
2015/07/17 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
MySQL导致索引失效的几种情况
2022/06/25 MySQL