有这样一段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. ubuntu 重置密码

      背景:在登陆ubuntu之后,按Ctr+Alt+F1进入控制台时,需要登陆,一时忘了密码... 参考:http://www.cnblogs.com/relaxgirl/p/3179507.html ...

  2. BZOJ2905 : 背单词

    首先对所有单词建立AC自动机,$S$是$T$的子串等价于$T$的某个前缀通过$fail$链可以走到$S$的终止节点,即$S$的终止节点是$T$某个前缀在$fail$树上的祖先. 设$f[i]$表示考虑 ...

  3. BZOJ3322 : [Scoi2013]摩托车交易

    求出最大生成树,则两点间的最大容量为树上两点间的边权的最小值. 设$lim[i]$表示第$i$个订单的城市允许携带的黄金上限,则 $lim[i]=\min(lim[i+1],a[i]和a[i+1]点间 ...

  4. BZOJ2773 : ispiti

    首先询问i相当于询问a[j]>=a[i],b[j]>=b[i]的j 如果b[j]==b[i],那么a[j]>a[i],这种情况先用set处理掉 如果b[j]>b[i],那么a[ ...

  5. [BZOJ 4436][Cerc2015]Kernel Knights

    [Cerc2015]Kernel Knights Time Limit: 2 Sec Memory Limit: 512 MBSubmit: 5 Solved: 4[Submit][Status][D ...

  6. [LintCode] Cosine Similarity 余弦公式

    Cosine similarity is a measure of similarity between two vectors of an inner product space that meas ...

  7. Oracle学习整理

    用 startup 命令启动数据库,用 shutdown 命令关闭数据库 Oracle SQL 语句由如下命令组成:  数据定义语言(DDL),包括 CREATE (创建)命令.ALTER (修改) ...

  8. pdf转能编辑的word的方法

    方法一:用汉王ocr文字识别软件,扫描文字,一页一页扫描,复制粘贴 方法二:将pdf文件拷贝到没有pdf阅读器的电脑上,同时你的office是2013,用word打开你的pdf文档,根据他的提示操作, ...

  9. JAVA字符串转日期或日期转字

    文章中,用的API是SimpleDateFormat,它是属于java.text.SimpleDateFormat,所以请记得import进来! 用法:    SimpleDateFormat sdf ...

  10. 39. 求分数序列前N项和

    求分数序列前N项和 #include <stdio.h> int main() { int i, n; double numerator, denominator, item, sum, ...