有这样一段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. Sprint第一个冲刺(第十一天)

    一.Sprint介绍 修改登录信息界面(修改用户名.密码.邮箱.电话.年龄),且同步到云端:修改Item布局:增添设置页. 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  2. DFS POJ 2676 Sudoku

    题目传送门 题意:数独问题,每行每列以及每块都有1~9的数字 分析:一个一个遍历会很慢.先将0的位子用vector存起来,然后用rflag[i][num] = 1 / 0表示在第i行数字num是否出现 ...

  3. 简单几何(线段相交) POJ 2653 Pick-up sticks

    题目传送门 题意:就是小时候玩的一种游戏,问有多少线段盖在最上面 分析:简单线段相交,队列维护当前最上的线段 /******************************************** ...

  4. HDU 1241 (DFS搜索+染色)

    题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1241 题目大意:求一张地图里的连通块.注意可以斜着连通. 解题思路: 八个方向dfs一遍,一边df ...

  5. BZOJ4260: Codechef REBXOR

    Description Input 输入数据的第一行包含一个整数N,表示数组中的元素个数. 第二行包含N个整数A1,A2,…,AN.     Output 输出一行包含给定表达式可能的最大值.   S ...

  6. Google Code Jam 2010 Round 1A Problem A. Rotate

    https://code.google.com/codejam/contest/544101/dashboard#s=p0     Problem In the exciting game of Jo ...

  7. hdu 1735 字数统计

    这道题是到贪心的题目,首先用ans记录下所有的0的个数,然后尽量去掉更多的0,剩下的0的个数就是最少的字数.首先想到最后一行的0的个数可以减掉,然后就是m行开头的两个0可以减掉.然后思考最多还可以减掉 ...

  8. 【转】【Asp.Net MVC】asp.net mvc Model验证总结及常用正则表达式

    本文属转载,来源: http://www.byywee.com/page/M0/S868/868615.html 关于Model验证官方资料: http://msdn.microsoft.com/zh ...

  9. ADO.NET对象之 DataTable

    ADO.NET可以在与数据库断开连接的方式下通过DataSet或DataTable对象进行数据处理,当需要更新数据时才重新与数据源进行连接,并更新数据源. DataTable对象表示保存在本机内存中的 ...

  10. 找1到n所有整数出现1的个数

    编程之美2.4 n=12时,1,11,12这3个数包含1,所以1的个数是5. Line 9是为了防止factor溢出. #include <iostream> #include <s ...