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 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
vue select 获取value和lable操作
Aug 28 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
天津市收音机工业发展史
2021/03/04 无线电
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
python命令行参数用法实例分析
2019/06/25 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
jupyter notebook清除输出方式
2020/04/10 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python爬虫 requests-html的使用
2020/11/30 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
模具数控专业自荐信
2014/01/27 职场文书
市场专员岗位职责
2014/02/14 职场文书
21岁生日感言
2014/02/27 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
升职自荐信范文
2015/03/27 职场文书
小平您好观后感
2015/06/09 职场文书
小学班主任工作随笔
2015/08/15 职场文书
学校团代会开幕词
2016/03/04 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Golang流模式之grpc的四种数据流
2022/04/13 Golang