要实现的效果：将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制。

实现过程如下：

  1.  <html>
  2.  <head>
  3.      <title>Copy text Demo</title>
  4.      <script type="text/javascript" src="jquery.min.js"></script>
  5.      <script type="text/javascript">
  6.       //复制内容
  7.          function Copy()
  8.          {
  9.              var copyData = $('#testDiv').text();
  10.              if (window.clipboardData) {
  11.                  window.clipboardData.clearData();
  12.                  window.clipboardData.setData("Text", copyData);
  13.                  alert('已经成功复制到剪帖板上!');
  14.              }
  15.              else
  16.              {
  17.                  selectText("testDiv");
  18.                  alert('非IE浏览器请使用CTRL + C键进行复制!');
  19.              }
  20.          }
  21.  
  22.          //选中文字
  23.          function selectText(element) {
  24.              var text = document.getElementById(element);//获取要选中的内容
  25.              if (document.body.createTextRange) {//IE浏览器
  26.                  var range = document.body.createTextRange();//创建选区
  27.                  range.moveToElementText(text);//移动TextRange对象使其起始点之间包含指定对象内的文本
  28.                  range.select();//选中选区
  29.              } else if (window.getSelection) {//非IE浏览器，getSelection方法可以产生Selection对象，所对应的是用户所选择的 ranges （区
  30.  
  31.  域），俗称拖蓝。
  32.                  var selection = window.getSelection();
  33.                  selection.removeAllRanges();//将所有的区域都从选区中移除
  34.                  var range = document.createRange();//返回新创建的 Range 对象，两个边界点都被设置为文档的开头
  35.                  range.selectNodeContents(text);//把范围边界设置为一个节点的子节点
  36.                  selection.addRange(range);//将一个区域（Range）对象加入选区
  37.              }
  38.          }
  39.      </script>
  40.  </head>
  41.  <body>
  42.  <div id="testDiv" style="overflow-x: hidden; word-break:break-all;border:1px solid #CCC;width:500px;height:333px;margin:50px auto;">
  43.  　  JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, 
  44.  
  45.  Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实
  46.  
  47.  现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟
  48.  
  49.  的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可
  50.  
  51.  。
  52.  jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的
  53.  
  54.  barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在
  55.  
  56.  世界前10000个访问最多的网站中，有超过55%在使用jQuery。
  57.  jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使
  58.  
  59.  用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
  60.  jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。
  61.  </div>
  62.  <div style='width:500px;margin:10px auto;'>
  63.      <input type="button" value="复制div中的内容" onclick="Copy()" />
  64.  </div>
  65.  </body>
  66.  </html>

注意，实现是JS+jquery，所以首先要先有个jquery库文件。下载地址：http://jquery.com/download/

目前只能在IE下直接复制，其他浏览器只能做到帮用户全选。

最终执行效果图：

1.IE

2.谷歌浏览器

3.火狐浏览器

参考例子：

1.https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

2.http://www.zhangxinxu.com/wordpress/?p=755

JS复制DOM元素文字内容的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. js实现页面元素随着内容的滚动而滚动

      CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...

  3. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  4. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  5. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  6. js正则获取html字符串指定的dom元素和内容

    var str = "<div>111<p id='abc'>3333</p></div><div>222<div id=' ...

  7. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  8. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  9. js 改变页面元素的内容

    改变页面标签里的内容 (方法) innerText innerHTML (常用)   代码示例 <div></div> <p> 我是文字 <span>1 ...

随机推荐

  1. 实习没事干之自学redis

    什么是Redis--http://how2j.cn/frontroute Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语 ...

  2. datepicker97切换年月日再连续点击下拉中日期的bug出现问题

    解决办法: function wdateOption(fmt){ if(fmt===undefined){fmt="yyyy-MM-dd"} return{ dateFmt:fmt ...

  3. PHP的file_get_contents()方法，将整个文件读入字符串中

    <?php $post_data = file_get_contents("e:\\1.txt"); echo $post_data; ?> 更多信息看这里:http: ...

  4. 九度oj题目1342：寻找最长合法括号序列II

    题目1342:寻找最长合法括号序列II(25分) 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:886 解决:361 题目描述: 假如给你一个由’(‘和’)’组成的一个随机的括号序列,当然 ...

  5. 阿里云API公共参数的获取

    阿里云公共参数API  https://help.aliyun.com/document_detail/50284.html?spm=5176.10695662.1996646101.searchcl ...

  6. ASP.NET Core中使用自定义路由

    上一篇文章<ASP.NET Core中使用默认MVC路由>提到了如何使用默认的MVC路由配置,通过这个配置,我们就可以把请求路由到Controller和Action,通常情况下我们使用默认 ...

  7. [Hadoop大数据]--kafka入门

    问题导读: 1.zookeeper在kafka的作用是什么? 2.kafka中几乎不允许对消息进行“随机读写”的原因是什么? 3.kafka集群consumer和producer状态信息是如何保存的? ...

  8. VMWARE 12安装Tools

    准备条件 1.yum install perl 2.yum install gcc 接着就是挂载安装 新建cdrom挂载目录mkdir /mnt/cdrom挂载光驱mount -t auto /dev ...

  9. js实现栈

    栈是一种先进后出的特殊线性表结构,存储上分链式存储和顺序存储两种方式 链式存储: function LinkedStack() { let Node = function (ele) { this.e ...

  10. 三、thymeleaf的使用

    1.简介 thymleaf是一个基于html的页面模板,springboot极力推荐使用它,代替jsp. API地址:https://www.thymeleaf.org/doc/tutorials/3 ...