日期:2014-05-16  浏览次数:20307 次

文本框值替换后的光标问题
一个小例子:
http://rebol.vlexo.net/Programming/keys/esp/esp_keyboard.htm

当我输入一串值后,比如abcdefghijk,然后我在e后面输入cx,它会给我实现替换,但是光标移到到了最后面。我知道这是重新赋值而引起的问题。有人说可以控制光标解决,比如说用TextRange对象等等,但是我目前没有找到成功的例子,谁能给我一个思路或者给个样例?非常感谢!

------解决方案--------------------
点击的时候把位置记下,替换后从点击的位置查找替换的字符,再把光标定位到那里

记下位置的方法
http://bbs.blueidea.com/thread-2794774-1-1.html
http://topic.csdn.net/u/20120113/00/8cd1aade-8f5d-4c2d-8aba-cb48d54137d9.html

光标定位你自己查查资料吧,我查到一些 没试过
http://wenku.baidu.com/view/97cf32896529647d272852cd.html

------解决方案--------------------
示例:http://jsfiddle.net/zswang/wJHVp/
JScript code
var AceEditor = /^o/.test(typeof exports) ? exports : AceEditor || {};
void function(exports){
    /**
     * Ace Engine Editor
     * 文本编辑器函数
     * @see http://code.google.com/p/ace-engine/wiki/AceEditor
     * @author 王集鹄(wangjihu,http://weibo.com/zswang)
     * @version 1.0
     */
    
    /**
     * 设置选择范围
     * @param{Element} editor 编辑器(<input>|<textarea>)
     * @param{Array|[start,end]} range 选择范围
     */
    function setSelectRange(editor, range){
        if (!editor) return;
        var start = Math.min(range[0], range[1]),
            end = Math.max(range[0], range[1]);
        editor.focus();
        if (editor.setSelectionRange){
            editor.setSelectionRange(start, end);
        } else if (editor.createTextRange){
            var textRange = editor.createTextRange();
            textRange.collapse(true);
            textRange.moveEnd("character", end);
            textRange.moveStart("character", start);
            textRange.select();
        }
    }

    /**
     * 修改选中处文本
     * @param{Element} editor 编辑器(<input>|<textarea>)
     * @param{String} value 文本值
     */
    function setSelectText(editor, value){
        if (!editor) return;
        editor.focus();
        if (editor.document && editor.document.selection){
            var textRange = editor.document.selection.createRange();
            textRange.text = value;
            textRange.select();
        } else if (/^n/.test(typeof editor.selectionStart)){
            var str = editor.value,
                start = editor.selectionStart,
                scroll = editor.scrollTop;
            editor.value = str.substr(0, start) + value +
                str.substring(editor.selectionEnd, str.length);
            editor.selectionStart = start + value.length;
            editor.selectionEnd = start + value.length;
            editor.scrollTop = scroll;
        }
    }
    
    function _calcBookmark(bookmark) {
        return (bookmark.charCodeAt(0) - 1) + (bookmark.charCodeAt(3) - 1) * 65536 + (bookmark.charCodeAt(2) - 1);
    }

    function _getSelectPos(editor, isend) {
        if (!editor) return;
        if (/^n/.test(typeof editor.selectionStart))
            return isend ? editor.selectionEnd : editor.selectionStart;
        if (!editor.createTextRange || !editor.document) return;
        editor.focus();
        var doc = editor.document, range = doc.selection.createRange().duplicate();
        if (!isend) range.collapse(true)
        range.setEndPoint("StartToEnd", range);
        var start = doc.body.createTextRange();
        start.moveToElementText(editor);
        return _calcBookmark(range.getBookmark()) - _calcBookmark(start.getBookmark());
    }

    function getSelectStart(editor){
        return _getSelectPos(editor);
    }
    function getSelectEnd(editor){
        return _getSelectPos(editor, true);
    }
    /**
     * 获取选中范围
     * @param{Element} editor 编辑器(<input>|<textarea>)
     * @return{Array|[start,end]} 返回选中范围
     */
    function getSelectRange(editor){
        return [getSelectStart(editor), getSelectEnd(editor)];
    }
    /**
     * 返回当前选中的文字
     * @param{Element} editor 编辑器(<input>|<texta