Question

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

我一直在Google搜索中找到以下链接：

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?

从那里我得到了这个

Remove

此fiddle

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

但是总是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 } } } ] }); } });会返回posic ...我该如何解决？

Answer 1

您可以尝试以下方法：

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的测试示例。

Answer 2

像这样使用Ext.getDOM()代替Ext.getCmp()：

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

console.log(caretPosition);

编辑：

该字段的xtype也必须更改为textarea。在这种情况下，您最初的示例也应该起作用。

Extjs如何获取文本区域中的光标位置

2 个答案: