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. Easy Tag Write(2)

    package skyseraph.android.util.nfc; import com.google.common.collect.BiMap; import com.google.common ...

  2. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  3. DataRow映射实体

    public static T ConvertToModel<T>(DataRow dr) where T : new() { T t = new T(); Type modelType ...

  4. [Struts2] Action Implements SessionAware

    struts2 的Action中若希望访问Session对象,可采用两种方式: 1.从ActionContext中获取: 2.实现SessionAware接口. 1.从ActionContext中获取 ...

  5. CURL命令报错:dyld: lazy symbol binding failed: Symbol not found: _SSL_load_error_strings解决办法

    Mac OS X 10.11.6, curl 命令报错,错误如下: dyld: lazy symbol binding failed: Symbol not found: _SSL_load_erro ...

  6. [SQL入门级] 上篇被移出园子首页,那这篇咱就'薄利多销'

    这个系列的博文知识回顾sql知识作的记录,温故而知新.上一篇内容达不到知识分享的层级被移出园子首页,对不住各位看官,内容简单了些.下面咱就记录多一些的基础知识,薄利多销: 控制用户权限 • 创建用户 ...

  7. Good Bye 2015 D. New Year and Ancient Prophecy

    D. New Year and Ancient Prophecy time limit per test 2.5 seconds memory limit per test 512 megabytes ...

  8. Hiho 1232 北京网络赛 F Couple Trees

    给两颗标号从1...n的树,保证标号小的点一定在上面.每次询问A树上的x点,和B树上的y点同时向上走,最近的相遇点和x,y到这个点的距离. 比赛的时候想用倍增LCA做,但写渣了....后来看到题解是主 ...

  9. C# 利用反射

    .NET基础篇——反射的奥妙 C#获取实体类属性名和值 | 遍历类对象 c#通过反射获取类上的自定义特性 C#利用反射+特性实现简单的实体映射数据库操作类

  10. JS子父窗口互相操作取值赋值的方法介绍

    $("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementById ...