Extjs如何获取textareafield中的光标位置

Question

我是 Extjs 的新手，我需要知道如何获取光标在文本区域中的位置。

我一直在谷歌搜索，我找到了这些链接：

EXTJS 5: Get the current cursor position in a textfield or lookupfield 和 In ExtJs, how to insert a fixed string at caret position in a TextArea?

从那里我得到了这个：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define({
            xtype: 'container',
            renderTo: Ext.getBody(),
            layout: 'vbox',
            padding: 20,
            defaults: {
                xtype: 'button',
                margin: '0 0 12 0'
            },

            items: [
                {
                    xtype: 'textareafield',
                    grow: false,
                    width: 545,
                    height: 120,
                    name: 'message',
                    fieldLabel: '',
                    id: 'mytextarea',
                    anchor: '100%'
                },
                {
                    xtype: 'button',
                    text: 'Go',
                    scale: 'medium',
                    id: 'mybutton',
                    listeners: {
                        click: function() {
                            var zone = Ext.getCmp('mytextarea');
                            var text = zone.getValue();
                            var posic = zone.el.dom.selectionStart;

                            console.log(posic); // undefined
                        }
                    }
                }
            ]
        });
    }
});

这个fiddle

哦，我正在使用 Ext 6.x、Linux Mint、Firefox 和 Chromium。

但总是posic会return undefined...我该如何解决这个问题？

Answer 1

像这样使用 Ext.getDOM() 而不是 Ext.getCmp()：

var myTextArea = Ext.getDom('mytextarea');
var textInArea = myTextArea.value;
var caretPosition = myTextArea.selectionStart;

console.log(caretPosition);

编辑：

此外，字段的 xtype 必须更改为 textarea。在这种情况下，您的初始示例也应该有效。

Answer 2

您可以尝试以下方法：

Ext.application({
    name : 'Fiddle',

    launch : function() {

    Ext.define('Trnd.TestWindow', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 400,
        height: 500,
        modal: true,
        closable: true,
        resizable: true,
        layout: 'fit',
        title: 'Close window to see the position',

        getCaretPos: function() {
            var me = this;

            var el = me.myTextArea.inputEl.dom;
            if (typeof(el.selectionStart) === "number") {
                return el.selectionStart;
            } else if (document.selection && el.createTextRange){
                var range = document.selection.createRange();
                range.collapse(true);
                range.moveStart("character", -el.value.length);
                return range.text.length;
            } else {
                throw 'getCaretPosition() not supported';
            }
        },      

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

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

            me.panel = Ext.create('Ext.panel.Panel', {
                items: [
                    me.myTextArea
                ]
            });

            me.add(me.panel);
        },

        listeners: {
            'close': function() {
                var me = this;

                alert(me.getCaretPos());
            }   
        }       
    }); 
    var win = new Trnd.TestWindow({
    });
    win.show();
    }
});

使用此 fiddle 的测试示例。

Extjs如何获取textareafield中的光标位置

Extjs how to get the cursor position in a textareafield

extjs

cursor-position