关于各浏览器下textarea中光标位置的获取问题详解

申明一下，我这里只是讲的textarea中的有关光标的几种方法，并不是针对整个document的，我相信把textarea中的光标方法弄清楚了的话，其他的就简单多了。

最近接触到一个新的东西，就是textarea中光标位置的获取。先来说一说我是怎么接触到这个东西的，最近一直在写一个能够通用的评论插件，在这个评论插件中我们加入了表情插入这个功能，也就是技能文字评论，也能表情评论，目前这个插件的样子是这样的

就是在做表情插入功能的过程中遇到的这个问题，按照最一般的从头到尾的写评论是不会出问题的，但是如果是评论写了一大段，然后回头想再插入一个表情的时候，问题就出现了。

那就是你必须知道你当前光标所在的位置是在哪里。。。

问题出现了当然得解决了，于是很正常的想法，当然是网上各种搜了，当然找到了获取光标位置的方法，但是很多都只是对其中某一个或某几个方法或属性的介绍或者是简单说明，并不是特别全面，所以在这里把握自己学到的一些关于光标位置获取的东西做一个小小的分享与总结

兼容性是老生常谈的一个问题，所以每一个功能的实现都有几种兼容性的实现方法，光标问题的兼容性主要表现在IE和非IE浏览器下面，也就是要实现IE和非IE的兼容性方法。首先，这里要说的是textarea中选中文本的获取。

在IE下选中内容的获取是很简单的，直接通过 document.selection.createRange()这个方法就可以获取到选中区域的内容，该方法返回的是一个对象，其中text字段就是选中的文本。

在非IE下则是通过对象的selectionStart（选中范围的起点）和selectionEnd（选中范围的末点），然后通过截取字符串substring来获取选中范围的.

几个TextRange（顾名思义，TextRange就可以理解为文本的选择范围）的常用属性及方法：

属性

• boundingWidth 获取绑定TextRange对象的矩形的宽度

• boundingHeight 获取绑定TextRange对象的矩形的高度

• boundingLeft 获取绑定TextRange对象的矩形左边缘和包含TextRange对象的左侧之间的距离

• boundingTop Retrieves the distance between the top edge of the rectangle that bounds the TextRange object and the top side of the object that contains the TextRange.

• offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置