Range在各浏览器下的问题和常见处理办法

第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。

一、关于浏览器的兼容性

　　　目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange

　　关于这三种的区别，请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的

　　可以看出 Mozilla 的 range 是一个selection对象，而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的，所以需要为这两种类型的range

分别写不同的兼容性的脚本，目前主流浏览器 Mozilla,chrome safari,opera 都支持 selection 对象，但是opera 也支持 IE 下text Range ，但是不全面。

所以代码应该这样

var selection; //申明range 对象if (window.getSelection) {

　　//主流的浏览器，包括mozilla，chrome，safari    selection = window.getSelection();} else if (document.selection) {     selection = document.selection.createRange();//IE浏览器下的处理，如果要获取内容，需要在selection 对象上加上text 属性}

其实判断浏览器的兼容性，我们还可以这么判断

if (Obj.createTextRange) {
　　//IE浏览器下的操作
} else if (Obj.setSelectionRange) {

　　//非IE 下的一些操作

}

我跟踪了下载chrome 和IE下的这些对象，上图给大家看一下

在ie下，如果创建了range对象，那么就有

　　range.moveEnd()

　　range.moveStart()

　　range.select();

可以实现选定文本的操作

在其他浏览器下，可以通过obj.setSelectionRange() 来实现选定操作，具体格式如下

o.setSelectionRange(start,end);

　　o：为文本输入框对象

　　start：为字符串的起始位置

　　end：为字符串的末位置

在鼠标的位置处，实现文本的插入操作，在ie下

可以通过document.selection.createRange().text = value;

其中 document.selection.createRange() 表示当前鼠标的位置的TextRange 对象， textRange.text = value表示在当前鼠标处插入值

在其他浏览器下中可以通过 obj.value = str +value +str1 的形式

在非ie下对于文本框这种输入的obj,是有 selectionStart，selectionEnd属性的，表示当前鼠标的位置。

总结:

　　1）提到了range对象不在同浏览器下创建，获取文本的内容以及兼容性的问题

　　2）如何通过range对象，实现文本框中的文本插入操作

　　3）如何通过range对象，实现文本的选定以及光标移动操作

欢迎大家拍砖。。

转载于:https://www.cnblogs.com/yupeng/archive/2012/03/20/2405459.html

Range在各浏览器下的问题和常见处理办法相关推荐

display:inline-block;在各浏览器下的问题和终极兼容办法
display:inline-block;在各浏览器下的问题和终极兼容办法一.IE 5.5.6.7 .8(Q)中display:inline-block;失效兼容办法: IE 5.5.6.7 .8 ...
x5内核在android 4.4卡顿,css,javascript_安卓手机X5内核浏览器下动画超级卡的解决办法？，css,javascript,html5 - phpStudy...
安卓手机X5内核浏览器下动画超级卡的解决办法? 碰到一个问题,我写了一个H5页面,里面有的动画在ios手机上运行十分流畅,一点都不卡,唯独在部分安卓手机下打开十分卡,卡顿到怀疑人生,我进行了一些优化, ...
电脑所有浏览器主页被篡改锁定的常见解决办法
浏览器主页被篡改锁定的常见解决办法许多人都遇到过浏览器主页出现不明原因被锁定或劫持成其它乱七八糟的网站.有时候在Internet选项里手动修改主页后,再次打开会发现又被篡改了.今天这里给大家分享些我 ...
Jlink在ADS下的配置说明及常见问题解决办法（转载）
**原文地址:[Jlink在ADS下的配置说明及常见问题解决办法] (http://www.360doc.com/content/13/1124/23/6844270_331917942.shtml) ...
Jlink在ADS下的配置说明及常见问题解决办法
阅读1087次 2013/4/2 21:04:37 Jlink在ADS下的配置说明及常见问题解决办法Zhaoxj 参考文档: *1.TQ2440开发板使用手册V3.2_20121203.pdf 2.J ...
【原创】Jlink在ADS下的配置说明及常见问题解决办法
Jlink在ADS下的配置说明及常见问题解决办法Zhaoxj 参考文档: *1.TQ2440开发板使用手册V3.2_20121203.pdf 2.JLINK ADS 2440.pdf 注:1.本说明是 ...
苹果手机浏览器下拉会闪动的解决办法
存放倒计时的div每隔1秒就刷新一次,结果在苹果手机浏览器上面下拉时,页面会有闪动效果. 解决办法就是:给div定一个固定的高度,它就不会闪动了. 转载于:https://www.cnblogs.co ...
火狐浏览器下DIV不能居中的解决办法
加上以下样式: * {margin:0px auto; padding:0px;}
百度地图测距功能 DistanceTool 在不同浏览器下标注不一致的解决办法，打开新地图测距不生效的解决办法
1. 在项目中用到百度地图的测距功能,在主页面的地图中用没问题,如果从主页的地图跳转到详情页的地图,在返回到主页,打开地图的测距功能,测距一直不显示.下面是解决办法将测距功能的工具类函数下载到本地, ...

Range在各浏览器下的问题和常见处理办法

Range在各浏览器下的问题和常见处理办法相关推荐

最新文章

热门文章