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. hduoj 1286 找新朋友

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 找新朋友 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  2. was not declared in this scope

    “was not declared in this scope”是一个错误信息,在编译的时候会遇到.其含义为标识符在其出现的地方是未被定义的. 出现该错误的时候,会同时把未定义的变量名显示出来.比如如 ...

  3. Kolmogorov-Smirnov检验

    Kolmogorov-Smirnov检验(K-S检验)基于累积分布函数,用以检验一个经验分布是否符合某种理论分布或比较两个经验分布是否有显著性差异. 两样本K-S检验由于对两样本的经验分布函数的位置和 ...

  4. 补全Gemfile缺少到javascript gem

    如果缺少某个gem,查看并修改Gemfile文件 第一步要先修改源 source 'https://ruby.taobao.org' 下面补全这两个gem gem 'execjs' gem 'ther ...

  5. 一周试用yii开发一个带各种该有功能的web程序(三)

    接上篇,为什么index 模版里没有任何有关require,inculde类型关键字,却任然有我们认为“多余”的字符出现.因为在至少我的认知里html的结构该是<html><head ...

  6. 在Ubuntu14.04_ROS_indigo上安装Kinect2驱动和bridge

    小乌龟:大乌龟,你这两周干么呢? 大乌龟:在Ubuntu14.04 ROS_indigo上装Kinect2的驱动和bridge 小乌龟:就装个驱动有什么难的 大乌龟:你说的对小乌龟,这确实不是问题,但 ...

  7. Android例子源码非第三方实现根据字母排序的城市列表

    values 下dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelin ...

  8. 170105、MySQL 性能优化的最佳 20+ 条经验

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  9. 使用jquery-qrcode生成二维码

    一.使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcod ...

  10. [Java Web]Error parsing HTTP request header Note: further occurrences of HTTP header parsing errors

    手机客户端向服务器提交Http请求时,Tomcat抛出错误: 十二月 31, 2014 2:32:45 下午 org.apache.coyote.http11.AbstractHttp11Proces ...