獲取 Textarea 的光標位置（摘自網絡）

在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。
下面我们一起来看看如何获取到 Textarea 元素中的光标位置。
首先，我们用 rangeData 对象作为数据存储，并获得焦点：

var rangeData = {start: 0, end: 0, text: "" };

textarea.focus();

对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：

rangeData.start = el.selectionStart;

rangeData.end   = el.selectionEnd;

通过截取我们可以得到光标的选区内容：

rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";

而对于 IE 浏览器处理起来就比较麻烦了，但我们依旧可以获取到选区：

oS = document.selection.createRange();

同时还可获取 Textarea 元素的选区：
为了使 oR 与 oS 在同一等级上比较，请勿使用：oR = textarea.createTextRange()

 

oR = document.body.createTextRange();

oR.moveToElementText(textarea);

如果光标在 Textarea 元素内，很自然 oS.text 就是我们需要的选区内容：

rangeData.text = oS.text;

并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。
getBookmark: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.
moveToBookmark: Moves to a bookmark.
我们用 rangeData.bookmark 来记录该位置数据：

rangeData.bookmark = oS.getBookmark();

下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 object.compareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。
compareEndPoints: Compares an end point of a TextRange object with an end point of another range.
moveStart: Changes the start position of the range.

for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {}

rangeData.start = i;

但由于在 IE 中，Textarea 元素中的所有换行符都占 1 个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理：

for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {

    // Why? You can alert(textarea.value.length)

    if (textarea.value.charAt(i) == '\n') {

        i ++;

    }

}

rangeData.start = i;

既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：

rangeData.end = rangeData.text.length + rangeData.start;

获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：

/**

* getCursorPosition Method

*

* Created by Blank Zheng on 2010/11/12.

* Copyright (c) 2010 PlanABC.net. All rights reserved.

*

* The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.

*/

function getCursorPosition(textarea) {

    var rangeData = {text: "", start: 0, end: 0 };

        textarea.focus();

    if (textarea.setSelectionRange) { // W3C

        rangeData.start= textarea.selectionStart;

        rangeData.end = textarea.selectionEnd;

        rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";

    } else if (document.selection) { // IE

        var i,

            oS = document.selection.createRange(),

            // Don't: oR = textarea.createTextRange()

            oR = document.body.createTextRange();

        oR.moveToElementText(textarea);



        rangeData.text = oS.text;

        rangeData.bookmark = oS.getBookmark();



        // object.moveStart(sUnit [, iCount])

        // Return Value: Integer that returns the number of units moved.

        for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {

            // Why? You can alert(textarea.value.length)

            if (textarea.value.charAt(i) == '\n') {

                i ++;

            }

        }

        rangeData.start = i;

        rangeData.end = rangeData.text.length + rangeData.start;

    }



    return rangeData;

}

得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：

/**

* setCursorPosition Method

*

* Created by Blank Zheng on 2010/11/12.

* Copyright (c) 2010 PlanABC.net. All rights reserved.

*

* The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.

*/

function setCursorPosition(textarea, rangeData) {

    if(!rangeData) {

        alert("You must get cursor position first.")

    }

    if (textarea.setSelectionRange) { // W3C

        textarea.focus();

        textarea.setSelectionRange(rangeData.start, rangeData.end);

    } else if (textarea.createTextRange) { // IE

        var oR = textarea.createTextRange();

        // Fixbug :

        // In IE, if cursor position at the end of textarea, the setCursorPosition function don't work

        if(textarea.value.length === rangeData.start) {

            oR.collapse(false)

            oR.select();

        } else {

            oR.moveToBookmark(rangeData.bookmark);

            oR.select();

        }

    }

}