[原创] [WEB/JavaScript] 取得当前TextArea的光标的位置

最近在写一个基于web的小东西,需要知道当前TextArea的光标的位置, 在网上搜索了2天,查到的方案不是根本不能用就是太复杂而且有许多问题. 只好自己埋头研究,最后发现其实实现起来非常简单:

 

 function GetCursorPosition(objElement) { var trCurrentSelect = document.selection.createRange();//如果当前输入焦点不在objElement则返回-1 if ( trCurrentSelect .parentElement()!=objElement ) return -1; //备份当前selection以便恢复 var trCurrentSelectBackup = trCurrentSelect.duplicate(); var trElement = objElement.createTextRange();//将插入位置移到objElement的最开始 trElement.collapse(true); trElement.select(); var trElementHead = document.selection.createRange(); //将trCurrentSelect的起始位置设置到trElementHead的起始位置,//这样trCurrentSelect将覆盖objElement的//起始位置到当前光标位置之间的区域 trCurrentSelect.setEndPoint("StartToStart",trElementHead);//恢复selection trCurrentSelectBackup.select();//trCurrentSelect的文字的长度即为光标位置(以字符为单位的偏移量) return trCurrentSelect.text.length;}  

 

这种方法即使在有文字被选中的情况下也可以很好的工作,并不会丢失被选中的文字.

 

有几点需要说明一下:

 

1 这里返回的值包括了所有的换行,一个换行占两个字符(/r/n),不需要的话自己过滤一下就行了.个人建议将一个换行当一个字符处理

return trCurrentSelect.text.replace(//r/n/ig,".").length;

 

2 TextRange.text末尾的回车换行会被自动全部去除,所以当光标所在位置前是一个或多个连续的回车换行的话,返回的值将不对.我还没有找到简单有效的办法解决,有谁找到了方法,请记得通知一下我.一个可能的方法是在开始在光标前插入一个字符,结束后将它去掉,但我觉得过于复杂所以没有试.

 

3 网上很多人提到调用以下方法时会报参数错误,根本原因是TextRange和oRange不是同一个对象产生的,这也是我的代码里第11~12行的原因:将两个range的父对象统一.

   TextRange.compareEndPoints(sType, oRange)
   TextRange.setEndPoint(sType, oRange)

4 在有文字被选中的情况下,如果是从后往前选中的,即光标停在选择块的前面,在第18句恢复之后光标会跑到选择块末尾,这样使得继续选择(按SHIFT+方向键)失常. 目前我也没有找到有效的解决方法.