获取 TextArea 的光标选择范围

要获取 TextArea 中光标所选择的范围及其内容，对于大部分浏览器来说非常简单：只需要读取 selectionStart 和 selectionEnd 属性就完成了。但是 IE6 - IE8 的 textarea 元素没有这两个属性，所以我们需要改用 IE 中独有的 TextRange 对象。例子如下：

function getSelection(area) { 

  var selstart, selend, seltext;

  if (area.selectionStart) {

    selstart = area.selectionStart;

    selend = area.selectionEnd;

    seltext = area.value.substring(selstart, selend);

  } else {

    var range1 = document.selection.createRange();

    if (range1.parentElement() != area) return;

    var range2 = range1.duplicate();

    range2.moveToElementText(area);

    range2.setEndPoint('EndToEnd', range1);

    selstart = range2.text.length - range1.text.length;

    selend = selstart + range1.text.length;

    seltext = range1.text;

  }

  return {

    selstart: selstart,

    selend: selend,

    seltext: seltext

  };

}

其中 range1.parentElement() == area 的判断是必需的，否则在 moveToElementText 这行 IE 会报错："参数无效"(Invalid argument)。在网上搜索得知，这是因为对 TextRange 的修改必需保证该对象是获得焦点的。因此，我们也可以通过area.focus() 来避免这个问题。

另外，如果尝试直接用下面方式直接创建 range2 然后调整它的结束位置，同样会出现“参数无效”的错误：

......

var range2 = codearea.createTextRange();

range2.setEndPoint('EndToEnd', range1);

......

因此上面采用迂回的方法来创建 range2，IE 这个破玩意的问题多的是。

这种方法在旧版本 IE 中还有个问题：当光标在行首时，得到的 selstart 位置是上一行的行尾位置，比正确值小2（注意 IE 中的 textarea 换行是两个字符 \r\n）。具体的解决办法可以看参考资料。

参考资料：

[1] Finding selection start and end position in a textarea, in Internet Explorer
[2] How to get caret position in textarea?
[3] How to get the start and end points of selection in text area?
[4] IE's document.selection.createRange doesn't include leading or trailing blank lines
[5] Introduction to Range
[6] TextRange object - MSDN
[7] createTextRange method - MSDN
[8] moveToElementText method - MSDN
[9] setEndPoint method - MSDN
[A] parentElement method - MSDN
[B] Textarea根据光标位置插入字符（IE，FF兼容）
[C] TextRange对象的setEndPoint方法和compareEndPoints方法