首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

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

文本框值替换后的光标问题
一个小例子:
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>|<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;                }            };        }(); 


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

热点排行