Range对象

Range 对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域。

最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后,你就可以把这个选择转为Range。当然,你也可以直接用程序定义Range

如果一个实现支持 Range 模块,那么document就定义了createRange()方法调用它可创建新的 Range 对象。

注意:IE 定义了不兼容的 Document.createRange() 方法,它返回的对象与 Rang 接口相似,但不兼容。docment.createTextRange();

Range 接口为指定文档“选中”的区域定义了大量的方法,此外还有几个方法可以用于在选中的区域中进行剪切和粘贴类型的操作。Range 接口的属性提供了获取范围的边界节点和偏移量的方法。它的方法提供了设置范围边界的方法。注意,范围的边界可以设置为Document 或 DocumentFragment 对象中的节点。一旦定义了范围的边界点,就可以使用 deleteContents()、extractContents()、cloneContents() 和 insertNode() 方法实现剪切、复制和粘贴的操作。

获得用户选择内容User selection

var userSelection;
if (window.getSelection) { //现代浏览器
userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera,应该放在后面
userSelection = document.selection.createRange();
}

Selection 是继承了Range对象,

从Selection对象创建Range对象

var getRangeObject = function(selectionObject) {
if (selectionObject.getRangeAt)
return selectionObject.getRangeAt();
else { // 较老版本Safari!
var range = document.createRange();
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
return range;
}
}
var rangeObject = getRangeObject(userSelection);

给Selection对象添加Range

window.getSelection().addRange(); 

这个功能可以帮用户自动选中,很有用。 IE里面对象大多支持select(),方法,直接选中。

应用

<script type="text/javascript">
function selectText() {
if (document.selection) {
     //IE
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('selectable'));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('selectable'));
window.getSelection().addRange(range);
}
}
</script>
<span id="selectable">点击后选中</span>
<input type="button" onclick="selectText()" value="点我" />

复制到剪贴板

<script>
window.onload = function() { var range = document.createRange();
var a = document.getElementsByTagName('a')[];
range.selectNode(a);
window.getSelection().addRange(range); } function copy() {
var copy = document.execCommand('copy');
console.dir(copy);
}
</script>
</head> <body>
<button onclick="copy()">sssss</button>
<a href="http://www.baidu.com"><span style="font-size:0">http://www.baidu.com</span>百度</a> <input type="text">
</body>

IE的话

window.clipboardData.setData("Text",clipBoardContent);

浏览器Range,Selection等选中文本对象的更多相关文章

  1. 在Word中直接用快捷键查找选中文本

    在word中选中文本后按Ctrl+F,有些时候选中文本会自动出现在“查找内容”文本框中,而有些时候显示的还是上次选中的文本.这是因为只有当Word认为选中的文本是一个“词”时,选中文本才会自动出现在“ ...

  2. 每日vim插件--vim中的文本对象及相关插件

    最近在个人博客上 http://foocoder.com  每天都会介绍一个vim插件,想起来园子也好久没更新了,也来更新一篇. 今天按读者留言的要求,介绍下文本对象.同时还会介绍我在用的几个文本相关 ...

  3. css禁止用户选中文本(转)

    body{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE1 ...

  4. input和textarea标签的select()方法----选中文本框中的所有文本

    JavaScript select()方法选中文本框中的所有文本 <input>和<textarea>两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本 ...

  5. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  6. select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  7. createTextRange 创建文本对象

    document.body.createTextRange 主要是用来对一些文本对象进行操作.比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createT ...

  8. HTML中解决双击会选中文本的问题

    HTML中解决双击会选中文本的问题 <div unselectable="on" style="-moz-user-select:none;" onsel ...

  9. WPF之RichTextBox丢失光标仍然选中文本

    描述:开发中完成了一个类似于Word的悬浮工具栏功能,选中文本之后可以自动弹出一个工具栏.可以修改字体.字体大小等功能,问题来了,我发现当去进行操作的时候原本选中的RichTextBox的内容的颜色会 ...

随机推荐

  1. 屌丝程序员的梦想 (六) 我也写个开源CMS

    离开上家公司之后,我没急着找下家公司,一直以来都是为公司做各个细小的功能却没有属于自己的完整的项目 思来想去,我准备用自己熟悉的thinkphp 和 extjs写一个开源的cms,从用户系统,文章系统 ...

  2. C++笔记(二)------ 头文件

    类似#include<string>与#include<string.h>等头文件的区别 标准的C++头文件没有.h扩展名,带有.h的头文件一般都是C语言的.例如#includ ...

  3. SQL中exists和in比较

    in 和exists in是把外表和内表作hash 连接,而exists 是对外表作loop 循环,每次loop 循环再对内表进行查询. 一直以来认为exists 比in 效率高的说法是不准确的.如果 ...

  4. 在Ubuntu 12.04下采用apt-get的方法安装Qt4

    在Ubuntu 12.04下采用apt-get的方法安装Qt4 注:之前发表的一篇博客是采用编译源码的方式安装Qt4,这是很有用的方式,因为源码安装对于所有系统都是通用的,其次,在使用交叉编译器的时候 ...

  5. [kohana] kohana3.2,如何兼容PDO数据库连接方式

    由于历史原因,有个kohana3.2的站点需要搬迁到php5.5上来,但php5.5已经不支持mysql_connect()这个函数了,只能使用PDO来连接数据库. 但换上PDO之后,报了这个的一个错 ...

  6. NIO SelectionKey中定义的4种事件

    SelectionKey.OP_ACCEPT —— 接收连接继续事件,表示服务器监听到了客户连接,服务器可以接收这个连接了 SelectionKey.OP_CONNECT —— 连接就绪事件,表示客户 ...

  7. SQL语句 还原未知逻辑名称数据库

    1. 查看 SQL Server 2000 中 Northwind 数据库文件的逻辑文件名(logical file name)和物理文件路径(operation system file name): ...

  8. PHP基础班初学心得:JS里inner的一些理解

    本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在这里分 ...

  9. sqlserver查询数据的所有表名和行数

    //查询所有表明 select name from sysobjects where xtype='u' select * from sys.tables //查询数据库中所有的表名及行数 SELEC ...

  10. apache2.4配置Django1.7运行环境

    系统环境Centos 6.5 这篇文章不适用6以下的系统,因为会碰到这个错误 [Mon Sep 22 18:13:02 2014] [error] [client 10.209.75.90] Trun ...