有这样一段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. 一个DIV三列布局100%高度自适应的好例子(国外)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...

  2. 简单几何(求交点) UVA 11437 Triangle Fun

    题目传送门 题意:三角形三等分点连线组成的三角形面积 分析:入门题,先求三等分点,再求交点,最后求面积.还可以用梅涅劳斯定理来做 /********************************** ...

  3. 博客搬到blog.csgrandeur.com

    博客已搬到blog.csgrandeur.com. cnblogs停止更新. wordpress太臃肿,难刷. hexo对windows似乎不太友好,迁移的时候建了十几层文件夹,导致目录过深无法移动无 ...

  4. JS生成随机的由字母数字组合的字符串

    前言 最近有个需求,是需要生成3-32位长度的字母数字组合的随机字符串,另一个是生成43位随机字符串. 方法一 奇妙的写法   1 Math.random().toString(36).substr( ...

  5. Underscore.js 中 _.throttle 和 _.debounce 的差异

    两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用. 通过分析其源代码: _.throttle方法源码 ...

  6. 【BZOJ】2946: [Poi2000]公共串

    http://www.lydsy.com/JudgeOnline/problem.php?id=2946 题意:给n个串,求最大公共子串.(1<=n<=5,每个串长度<=2000) ...

  7. 关于APP自动化工程的一点小想法

    首先谈一下APP自动化测试面临的一些局限性? 答:测试业务的不明确性,APP逻辑复杂,界面的跳转变化随时间变化. 测试本身的不确定性,如不定时弹窗问题. 测试环境不稳定性,主要是网络的稳定性. 测试接 ...

  8. Windows环境下Redis

    Redis 是一个高性能的key-value数据库, 使用内存作为主存储,数据访问速度非常快,当然它也提供了两种机制支持数据持久化存储.比较遗憾的是,Redis项目不直接支持Windows,Windo ...

  9. jsoup httpclient 爬取网页并下载google图标

    jsoup下载地址 http://www.jsoup.org httpclient下载地址 http://hc.apache.org/downloads.cgi 其他jar包见附件 Crawler p ...

  10. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...