一、关于浏览器的兼容性

   目前主要有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对象理解,浏览器兼容性,获取鼠标光标位置的更多相关文章

  1. 使用Dom的Range对象处理chrome和IE文本光标位置

    有这样一段js: var sel = obj.createTextRange(); sel.move('character', num); sel.collapse(); sel.select(); ...

  2. document.compatMode属性和获取鼠标的位置

    document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容 ...

  3. C# 设置鼠标光标位置

    C# 设置鼠标光标位置 using System.Drawing; using System.Runtime.InteropServices; namespace ZB.QueueSys.Common ...

  4. 获取鼠标经过位置的X、Y坐标

    利用JavaScript获取鼠标经过位置的X.Y坐标方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  5. js获取鼠标的位置

    <!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...

  6. WPF 获取鼠标屏幕位置、窗口位置、控件位置

    原文:WPF 获取鼠标屏幕位置.窗口位置.控件位置 public struct POINT { public int X; public int Y; public POINT(int x, int ...

  7. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  8. WPF获取鼠标当前位置

    /// <summary> /// 设置鼠标的坐标 /// </summary> /// <param name="x">横坐标</par ...

  9. 2015/11/4用Python写游戏,pygame入门(4):获取鼠标的位置及运动

    按昨天的说法,今天将开始做一个简单的游戏了. 目标是拷贝微信的飞机大战,当然拷贝完以后大家就具备自己添加不同内容的能力了. 首先是要拿到一些图片素材,熟悉使用图像处理软件和绘画的人可以自己制作,并没有 ...

随机推荐

  1. jQuery的封装和扩展方式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. mysql数据向Redis快速导入

    Redis协议 *<args><cr><lf> 参数个数 $<len><cr><lf> 第一个参数长度 <arg0> ...

  3. fuser 命令的介绍

    fuser 可以显示出当前哪个程序在使用磁盘上的某个文件.挂载点.甚至网络端口,并给出程序进程的详细信息.  fuser显示使用指定文件或者文件系统的进程ID.默认情况下每个文件名后面跟一个字母表示访 ...

  4. Linq to Entities下存储过程的使用方法

    1.首先在数据库中创建好存储过程. 2.在实体模型中添加存储过程的映射.此时根据映射过来的查询结果有两种途径:第一种可以选择添加选择的存储过程的函数到实体模型中.这样的话,查询的结果将会是xxx_re ...

  5. 关于VSS上的项目源码管理的注意问题

    1.将项目添加到vss上面去 如果项目取的名字没有问题,则不需要去vss上面去新建项目,直接在解决方案那里右击“添加到vss”中,把第一个输入框中的名字(xxxx.root)全部清除掉.确定即可. 2 ...

  6. C#字符串处理(String与StringBuilder)

    首先介绍一下常用的几个功能:Compare(str1,str2)——比较两个字符串str1,str2的大小,如果大于返回正数,等于返回0,小于返回负数!IndexOf——定位字符串中第一次出现某个给定 ...

  7. 【MongoDB】2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errno:10061 由于目标计算机积极拒绝,无法连接。

    1:启动MongoDB 2014-07-25T11:00:48.634+0800 warning: Failed to connect to 127.0.0.1:27017, reason: errn ...

  8. 转 状态压缩DP

    引入 首先来说说“状态压缩动态规划”这个名称,顾名思义,状态压缩动态规划这个算法包括两个特点,第一是“状态压缩”,第二是“动态规划”. 状态压缩: 从状态压缩的特点来看,这个算法适用的题目符合以下的条 ...

  9. zk label控件内容换行

    Label控件本身无法换行,不过div却可以,只要设置了div的宽度,那么就想如果在Label控件外套个div会怎样,结果可喜可乐: <div width="80px"> ...

  10. 关于ASP.NET Web API 客户端的请求报文中添加 Authorization

    当你使用客户端发送请求 Web API 的时候,因为API 有验证,所以你的请求报文中必须有”Authorization“,那么就需要手动添加了! HttpClient client = new Ht ...