文本框值替换后的光标问题

[KG071]

一个小例子：
http://rebol.vlexo.net/Programming/keys/esp/esp_keyboard.htm

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

[p2227]

点击的时候把位置记下，替换后从点击的位置查找替换的字符，再把光标定位到那里

记下位置的方法
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/

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>|<textarea>)
     * @return{String} 返回当前选中文字
     */
    function getSelectText(editor){
        if (!editor) return;
        editor.focus();
        if (editor.document && editor.document.selection)
            return editor.document.selection.createRange().text;
        else if ("selectionStart" in editor)
            return editor.value.substring(editor.selectionStart, editor.selectionEnd);
    }

    exports.setSelectRange = setSelectRange;
    exports.getSelectRange = getSelectRange;

    exports.setSelectText = setSelectText;
    exports.getSelectText = getSelectText;

    exports.getSelectStart = getSelectStart;
    exports.getSelectEnd = getSelectEnd;
}(AceEditor);

//--DEMO--
        function g(id){
            return document.getElementById(id);
        }
        void function(){
            var esperanto = [
                ['cx','\u0109'],  ['gx','\u011D'],
                ['hx','\u0125'],  ['jx','\u0135'],
                ['sx','\u015D'],  ['ux','\u016D'],

                ['cX','\u0109'],  ['gX','\u011D'],
                ['hX','\u0125'],  ['jX','\u0135'],
                ['sX','\u015D'],  ['uX','\u016D'],

                ['Cx','\u0108'],  ['Gx','\u011C'],
                ['Hx','\u0124'],  ['Jx','\u0134'],
                ['Sx','\u015C'],  ['Ux','\u016C'],

                ['CX','\u0108'],  ['GX','\u011C'],
                ['HX','\u0124'],  ['JX','\u0134'],
                ['SX','\u015C'],  ['UX','\u016C']
            ];
            var dict = {};
            for (var i = 0; i < esperanto.length; i++){
                dict[esperanto[i][0]] = esperanto[i][1];
            }
            
            g('editor').onkeyup = function(e){
                e = e || event;
                switch(e.keyCode){
                    case 88: //x
                        var start = AceEditor.getSelectStart(this);
                        if (start < 2) break;
                        var key = this.value.replace(/\r\n?/g, '\n').substr(start - 2, 2),
                            value = dict[key];
                        if (value){
                            AceEditor.setSelectRange(this, [start - 2, start]);
                            AceEditor.setSelectText(this, value);
                        }
                        break;
                }
            };
        }();

特别注意的是ie中的文本编辑框，换行是两个字符"\r\n"，需将换行全部替换为"\n"方便处理。

ie8、firefox9下测试通过，其他浏览器环境如果测试完，反馈一下结果。

[KG071]

[Quote=引用 1 楼 p2227 的回复:]

点击的时候把位置记下，替换后从点击的位置查找替换的字符，再把光标定位到那里

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

光标定位你自己查查资料吧，我查到一些 ……
[/Quote]

谢谢你的回答 你所说的资料我大概都看过 但是没能完全解决问题 点击backspace键或del键光标还是会跑到最前面去 我最希望的是一个成功的例子 网上找的资料都是不够完整 自己组装了下 还是有些问题

[王集鹄]

change的方案。http://jsfiddle.net/wJHVp/6/
问题解决了就赶紧结帖。有新的问题就开新的帖子问，别纠缠同一个帖子、同一个人。

[KG071]

[Quote=引用 2 楼 zswang 的回复:]

示例：http://jsfiddle.net/zswang/wJHVp/
JScript code
var AceEditor = /^o/.test(typeof exports) ? exports : AceEditor || {};
void function(exports){
/**
* Ace Engine Editor
* 文本编辑器函数
……
[/Quote]

在IE8下粗略测了一下 没有问题 多谢集鹄大哥