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对象,实现文本的选定以及光标移动操作
Range对象理解,浏览器兼容性,获取鼠标光标位置的更多相关文章
- 使用Dom的Range对象处理chrome和IE文本光标位置
有这样一段js: var sel = obj.createTextRange(); sel.move('character', num); sel.collapse(); sel.select(); ...
- document.compatMode属性和获取鼠标的位置
document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容 ...
- C# 设置鼠标光标位置
C# 设置鼠标光标位置 using System.Drawing; using System.Runtime.InteropServices; namespace ZB.QueueSys.Common ...
- 获取鼠标经过位置的X、Y坐标
利用JavaScript获取鼠标经过位置的X.Y坐标方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- js获取鼠标的位置
<!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...
- WPF 获取鼠标屏幕位置、窗口位置、控件位置
原文:WPF 获取鼠标屏幕位置.窗口位置.控件位置 public struct POINT { public int X; public int Y; public POINT(int x, int ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- WPF获取鼠标当前位置
/// <summary> /// 设置鼠标的坐标 /// </summary> /// <param name="x">横坐标</par ...
- 2015/11/4用Python写游戏,pygame入门(4):获取鼠标的位置及运动
按昨天的说法,今天将开始做一个简单的游戏了. 目标是拷贝微信的飞机大战,当然拷贝完以后大家就具备自己添加不同内容的能力了. 首先是要拿到一些图片素材,熟悉使用图像处理软件和绘画的人可以自己制作,并没有 ...
随机推荐
- c++实现单向链表
一.问题描述 1.题目内容:集合的并.交和差运算 编写一个能演示执行集合的并.交和差运算的程序. 2.基本要求 由用户输入两组整数分别作为两个集合的元素,由程序计算它们的交.并和差集,并将运算结果输出 ...
- Nodejs正则表达式函数之match、test、exec、search、split、replace使用详解
1. Match函数 使用指定的正则表达式函数对字符串惊醒查找,并以数组形式返回符合要求的字符串 原型:stringObj.match(regExp) 参数: stringObj 必选项,需要去进行匹 ...
- jsp统测
. 解析:B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构 . 解析:web-inf目录中的文件不能被客户端直接访问.所以正确答案为c 解析:jsp的是jsp内置 ...
- Linux_sudo权限
一.sudo权限(只能由管理员操作) 1. 操作对象 --> 命令(命令也是文件) 2. 命令存放路径/sbin与/bin --> 只由root管理员用户操作 3. 实际工作中,是不允许你 ...
- CCS样式表
一.css样式表 1.样式表分类 1.内联式 <p style="font-size:18px;">This is an apple</p> 2.内嵌样式表 ...
- typeof操作符在javascript中运用时时页面上的操作数显示
typeof可以告诉我们它的操作数是一个字符串(string).数值(number).函数(function).布尔值(boolean)或对象(object). 1.字符串(string) alert ...
- unity3d插件Daikon Forge GUI 中文教程5-高级控件listbox和progress bar的使用
3.3.listbox列表框 Atlas 图集: 下面应用到的精灵都是在这里的. ListBox中的内容: 背景精灵 图片的主颜色 Padding边距 Scrollbar 滚动条对象的预制体或者对象, ...
- webGL
WebGL: 是 OpenGL 和 JavaScript 之间的结晶.HTML5 的 canvas 元素里.利用和OpenGL同样的API.可以绘制高精度的三维图像. (OpenGL 能够从任意视点 ...
- document.body.clientHeight 和 document.documentElement.clientHeight的区别
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- [转]nls_lang设置
1. NLS_LANG 参数组成NLS_LANG参数由以下部分组成:NLS_LANG=<Language>_<Territory>.<Clients Characters ...