一、关于浏览器的兼容性

   目前主要有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. hdu2094 set初体验

    有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛.球赛的规则如下:如果A打败了B,B又打败了C,而A与C之间没有进行过比赛,那么就认定,A一定能打败C.如果A打败了B,B又打败了C,而 ...

  2. ios编译ASIHTTPRequest时出现 'libxml/HTMLparser.h' file not found in ASIHTTPRequest

    解决方法是添加libxml2.dylib 然后在Build Settings 中的 Header Search Paths 添加: ${SDK_DIR}/usr/include/libxml2

  3. TYVJ P1103 多项式输出 Label:模拟 有点儿坑

    描述 一元 n 次多项式可用如下的表达式表示:  f(x)=an*x^n+an-1*x^n-1+...+a1*x+a0,an<>0其中,ai*a^x 称为i次项,ai称为i次项的系数.给出 ...

  4. [WP8.1UI控件编程]SemanticZoom控件实现分组列表

    11.1.5 SemanticZoom实现分组列表 SemanticZoom控件可以让用户实现一种更加高级的列表,这种列表可以对列表的项目进行分组,同时这个SemanticZoom控件会提供两个具有相 ...

  5. Windows Maven package时报错问题的解决

    google了一把,看到别人的说法是Stack size 不够大. Stack Space用来做方法的递归调用时压入Stack Frame.所以当递归调用太深的时候,就有可能耗尽Stack Space ...

  6. window通过mstsc远程连接其它计算机

    1.Windows远程连接树莓派 1.1.Win + r 出现下面界面. 1.2.输入mstsc今日下面界面 1.3.出现警告,选“是” 1.4.输入账户密码,点“OK”

  7. OO与设计模式的原则、目标

    OO与设计模式的原则.目标(转) 前两天,和一朋友聊到OO设计原则时,对设计模式有了更深的了解,在这里总结一下,与大家分享.OO(Object–Oriented )面向对象   OO方法(Object ...

  8. WinForm上显示gif动画:转

    WinForm上的ProgressBar,老实说,实在是不敢恭维,太死板,太难看了,即使做成实时显示处理进度的,它还是逃离不了“难看”.现 在的web2.0上到处都能看到一个显示正在处理的小圆圈在那转 ...

  9. validation插件

    1.项目下载地址:http://plugins.jquery.com/validation/ 2.引入 <script type="text/javascript" src= ...

  10. Html Mailto标签详细使用方法

    Html中mailto标签是一个非常实用的贴近用户体验的标签,大多情况下人们都在这样使用 <a href="mailto:example@phplamp.com">ex ...