有这样一段js:

   var sel = obj.createTextRange();
sel.move('character', num);
sel.collapse();
sel.select();

那么在IE中是没有问题的,如:textArea它是可以创建出createTextRange对象的。那么下面的三句就是让当前的鼠标“光标”停留在num的位置(可以查询相关的资料)。这段代码你可选择在click中去触发。

也可以在focus中触发,这个时机你可以自己控制。

同样的效果在chrome中可以使用:

obj.selectionStart = obj.selectionEnd = num;

来设置光标的位置,当然chrom中是不支持createTextRange方法的,当然也有其它的方式去实现,这里不做介绍。。。

那么问题来了,如果你选择在HTML元素的click事件中去触发那么你是幸运的,可以做到和IE的效果没有任何的不同。但如果你一定要在focus中去触发,那么完蛋了,该发生的效果并没有发生!

经过尝试之后还是十分幸运的,我们可以绕过这个问题。浏览器在处理focus和click事件时的顺序是,先触发focus后出发click。那么我们就可以配合这两个方法去间接实现这个过程了。

提供简单的代码供参考:

var focusStart = 0;
document.getElementById('textArea的id').onclick = function () {
if (focusStart) {
moveEnd(this);
focusStart = 0;
}
}
document.getElementById('textArea的id').onfocus = function () {
if (document.selection) {
moveEnd(this);
} else {
focusStart = 1;
}
}
function moveEnd(obj) {
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.focus();
obj.selectionStart = obj.selectionEnd = len;
}
}

使用Dom的Range对象处理chrome和IE文本光标位置的更多相关文章

  1. JS 之DOM range对象

    DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...

  2. XML DOM - Range 对象

    Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域.   dom标准Range对象 在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...

  3. getSelection、range 对象属性,方法理解,解释

    网上转了一圈发现没有selection方面的解释,自己捣鼓下 以这段文字为例子.. <p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火 ...

  4. web前端学习(二)html学习笔记部分(3)--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

  5. HTML5中的Range对象的研究

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  6. HTML5中的Range对象的研究(转载)

    一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = docu ...

  7. HTML5 编辑 API 之 Range 对象(一)

     一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...

  8. 处理Selection对象和Range对象——Word VBA中重要的两个对象

    处理Selection对象和Range对象——Word VBA中重要的两个对象 Word 开发人员参考Selection 对象代表窗口或窗格中的当前所选内容.所选内容代表文档中选定(或突出显示)的区域 ...

  9. 运用 Range 对象处理 Word 文档内容

    运用 Range 对象处理 Word 文档内容   在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...

随机推荐

  1. css构造文本

    1. 1. 文本缩进text-indent:值:值为数字,最常用的数值单位是px(像素),也可以直接是百分比!text-indent:100px;text-indent:10%;2. 文本对齐text ...

  2. Square Coins[HDU1398]

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  3. Get function name by address in Linux

    Source file: 1: #define __USE_GNU //import! 2: #include <dlfcn.h> 3: #include <stdio.h> ...

  4. SVN标准命令

    SVN标准命令 范例 checkout 检出 svn  co  URL 检出app/search/news/apache/主干上最新版本到本地工作副本,可执行命令: svn co  https://s ...

  5. linux fork 进程后 主进程的全局变量

    fork一个进程后,复制出来的task_struct结构与系统的堆栈空间是父进程独立的,但其他资源却是与父进程共享的,比如文件指针,socket描述符等 不同的进程使用不同的地址空间,子进程被创建后, ...

  6. 【wikioi】1108 方块游戏(模拟)

    http://wikioi.com/problem/1108/ 这题有点变态,因为他根本没有策略! 还是说这题不是实时的?反正这题很变态,是在一个时间段同时消除所有的行列斜边,同一时间!!!!!! 所 ...

  7. CentOS6.5的openssl升级

    CentOS6.5的openssl升级:(修复心脏漏血漏洞) [root@linux1 ~]# rpm -qi openssl|grep VersionVersion : 1.0.1e Vendor: ...

  8. 短语密码(blowfish_secret)的设置

    简单的说,phpmyadmin就是一种mysql的管理工具,安装该工具后,即可以通过web形式直接管理mysql数据,而不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管理者,下面 ...

  9. 根据PHP手册什么叫作变量的变量?

    在最近做的一个项目中,发现了一个新的概念,关于在PHP中使用变量的变量.在的程序中,需要在一个页面同时更新多个记录,在经过相当长时间的痛苦思索之后,脑海中偶然地闪现出了变量的变量(variable v ...

  10. [转]ASP.NET会话(Session)保存模式

    本文转自:http://blog.csdn.net/cityhunter172/article/details/727743 作者:寒羽枫(cityhunter172) 大家好,已有四个多月没写东东啦 ...