获取Textarea 元素当前的光标位置及document.selection.createRange()资料

来源：互联网发布：软件著作权发明专利编辑：程序博客网时间：2024/05/29 04:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Demo ： Textarea 元素的光标位置</title>    <style type="text/css">        #result        {            font-size: 18px;            line-height: 25px;            padding-left: 20px;        }    </style></head><body>    <div>        <h1>            Textarea 元素的光标位置</h1>        <ul>            <li>获取 Textarea 元素当前的光标位置</li>            <li>设置回原先的 Textarea 元素的光标位置</li>            <li>在 Textarea 元素的光标位置插入文本</li>        </ul>        <form action="#">        <textarea id="test" rows="8" cols="50"></textarea>        <p>            <input type="button" id="get" value="Get Cursor Position" />            <input type="button" id="set" value="Set Cursor Position" />            <input type="button" id="add" value="Add Text After Cursor Position" />        </p>        </form>        <h2>            Textarea Range：</h2>        <div id="result">        </div>        <script type="text/javascript">            document.getElementById("get").onclick = function () {                //alert(tx.value.length);                var tx = document.getElementById("test");                var re = document.getElementById("result");                var pos = cursorPosition.get(tx);                re.innerHTML = ("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--' : pos.text));            }            document.getElementById("set").onclick = function () {                var tx = document.getElementById("test");                var re = document.getElementById("result");                var pos = cursorPosition.get(tx);                cursorPosition.set(tx, pos);                re.innerHTML = "";            }            document.getElementById("add").onclick = function () {                var tx = document.getElementById("test");                pos = cursorPosition.get(tx);                cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本：", ""));            }            /**            * cursorPosition Object            */            var cursorPosition = {                get: function (textarea) {                    var rangeData = { text: "", start: 0, end: 0 };                    if (textarea.setSelectionRange) { // W3C                        textarea.focus();                        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                        textarea.focus();                        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) == '\r') {                                i++;                            }                        }                        rangeData.start = i;                        rangeData.end = rangeData.text.length + rangeData.start;                    }                    return rangeData;                },                set: function (textarea, rangeData) {                    var oR, start, end;                    if (!rangeData) {                        alert("You must get cursor position first.")                    }                    textarea.focus();                    if (textarea.setSelectionRange) { // W3C                        textarea.setSelectionRange(rangeData.start, rangeData.end);                    } else if (textarea.createTextRange) { // IE                        oR = textarea.createTextRange();                        // Fixbug : ues moveToBookmark()                        // In IE, if cursor position at the end of textarea, the set function don't work                        if (textarea.value.length === rangeData.start) {                            //alert('hello')                            oR.collapse(false);                            oR.select();                        } else {                            oR.moveToBookmark(rangeData.bookmark);                            oR.select();                        }                    }                },                add: function (textarea, rangeData, text) {                    var oValue, nValue, oR, sR, nStart, nEnd, st;                    this.set(textarea, rangeData);                    if (textarea.setSelectionRange) { // W3C                        oValue = textarea.value;                        nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);                        nStart = nEnd = rangeData.start + text.length;                        st = textarea.scrollTop;                        textarea.value = nValue;                        // Fixbug:                        // After textarea.values = nValue, scrollTop value to 0                        if (textarea.scrollTop != st) {                            textarea.scrollTop = st;                        }                        textarea.setSelectionRange(nStart, nEnd);                    } else if (textarea.createTextRange) { // IE                        sR = document.selection.createRange();                        sR.text = text;                        sR.setEndPoint('StartToEnd', sR);                        sR.select();                    }                }            }        </script>    </div></body></html>