如何检索 ExtJS 文本区域字段中的光标位置？

Question

我在一个extJS窗口中定义了一个文本区域字段如下：

       me.myTextArea = Ext.create({
        xtype: 'textareafield',
        width: 500,
        height: 500,
        editable: true,
        selectOnFocus: false,
        listeners: {
            afterrender: function() {
                this.focus(true);
                let cursorPos = this.getValue().length;
                this.selectText(cursorPos, cursorPos);
            }
        }
    });

我将文本区域字段添加到包含在窗口中的面板中，并将文本区域字段设置为焦点元素。在呈现 textarea 字段后，我阻止了那里的文本被选择。我想添加以下功能。关闭窗口后，我将能够获得光标在文本区域字段中的位置。到目前为止，我解决问题的尝试都没有成功。我设置了一个警报如下：

    listeners: {
    'close': function(me) {
        alert(me.getCaretPos(cmp.myTextArea.getEl().getId()));
    }
},

现在名为“getCaretPos”的函数旨在获取光标位置。我没有发明这个功能，但我在网上找到了。不幸的是，该函数不起作用，它总是返回-1：

    getCaretPos: function(id){
    var el = document.getElementById(id);
    var rng, ii=-1;
    if(typeof el.selectionStart=="number") {
        ii=el.selectionStart;
    } else if (document.selection && el.createTextRange){
        rng=document.selection.createRange();
        rng.collapse(true);
        rng.moveStart("character", -el.value.length);
        ii=rng.text.length;
    }
    return ii;
}

特别是，我不明白为什么函数中始终未定义“el.selectionStart”。如果有人能帮助我解开这个谜，我会很高兴。

Answer 1

在这个 FIDDLE 中，我使用extend:Ext.form.field.TextArea 创建了一个custometextarea 并放置了一些自定义方法。我希望这将帮助/指导您实现您的要求。

我已检查此代码在 ExtJS 4.x 及更高版本中是否有效。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('CustomeTextArea', {
            extend: 'Ext.form.field.TextArea',
            xtype: 'customtextarea',

            inputTypeSelectionSupported: /text|password|search|tel|url/i,

            selectDir: {
                b: 'backward',
                back: 'backward',
                f: 'forward'
            },

            /*
             * this event will call get the cursoe postion inside of field
             * @return {NUMBER}
             */
            getCaretPos: function () {
                var dom = this.inputEl.dom,
                    pos, selection;

                if (this.inputTypeSelectionSupported.test(dom.type)) {
                    pos = dom.selectionStart;
                    selection = (typeof pos !== 'number') && this.getTextSelection();
                    if (selection) {
                        pos = selection[0];
                    }
                } else {
                    Ext.raise('Input type of "' + dom.type + '" does not support selectionStart');
                }

                return pos;
            },

            /*
             * this event will call selectText event
             * @params {NUMBER} pos
             */
            setCaretPos: function (pos) {
                this.selectText(pos, pos);
            },

            /*
             * @params {NUMBER} start
             * @params {NUMBER} end
             * @params {STRING} direction to select it is optional
             */
            selectText: function (start, end, direction) {
                var me = this,
                    range,
                    dom = me.inputEl.dom,
                    len;

                if (dom && me.inputTypeSelectionSupported.test(dom.type)) {
                    start = start || 0;
                    len = dom.value.length;
                    if (end === undefined) {
                        end = len;
                    }
                    direction = me.selectDir[direction] || direction || 'forward';
                    if (dom.setSelectionRange) {
                        dom.setSelectionRange(start, end, direction);
                    } else if (dom.createTextRange) {
                        range = dom.createTextRange();
                        range.moveStart('character', start);
                        range.moveEnd('character', -(len - end));
                        range.select();
                    }
                } else if (!me.inputTypeSelectionSupported.test(dom.type)) {
                    Ext.raise('Input type of "' + dom.type + '" does not support setSelectionRange');
                }

                return me;
            },

            //This event will select the text inside of textfield/textarea
            getTextSelection: function () {
                var dom = this.inputEl.dom;
                if (this.inputTypeSelectionSupported.test(dom.type)) {
                    return [
                        dom.selectionStart,
                        dom.selectionEnd,
                        dom.selectionDirection
                    ];
                } else {

                    Ext.raise('Input type of "' + this.dom.type + '" does not support selectionStart, selectionEnd and selectionDirection');

                    return [];
                }
            }
        });

        Ext.create('Ext.window.Window', {
            title: 'cursor position',
            height: 200,
            width: 400,
            layout: 'fit',
            items: [{
                xtype: 'customtextarea',
                margin: 5,
                grow: true,
                name: 'message',
                fieldLabel: 'Message',
                labelAlign: 'top',
                value: 'How can I retrieve the cursor position in an ExtJS text area field?',
                anchor: '100%',
                listeners: {
                    afterrender: function (cmp) {
                        Ext.defer(function () {
                            cmp.focus(false); //if you pass true then it will automatically select text inside of field
                            let cursorPos = cmp.getValue().length;
                            cmp.selectText(0, cursorPos - 5, 'b');
                        }, 50)
                    }
                }
            }],
            listeners: {
                beforeclose: function (win) {
                    var textArea = win.down('customtextarea'),
                        pos = textArea.getCaretPos();

                    Ext.Msg.alert('Success', `This is your cursor postion <b>${pos}</b>`)
                }
            }
        }).show();
    }
});