How to use the onkeyup event to a TextField?

Question

I want to use onkeyup event of text field, so we can count that character when enter the text.

Sounds like you've got an idea as to how to solve the problem. Let us know when you encounter difficulties implementing it. — jsheeran, Jan 24 '18 at 15:51
I've tried the following, but the onkeyup event doesn't seem to fire for the TextField object :- new Ext.form.TextField({ emptyText:'insert name', listeners: { 'onkeyup': function(obj) { alert('test fire'); } } }), — Hemant, Jan 25 '18 at 07:32

score 2 · Answer 1 · answered Jan 25 '18 at 08:55

enableKeyEvents: true

For key events to work, you need to explicitly specify it.

Working POC code:

Ext.onReady(function () {
    Ext.create({
        xtype: 'panel',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'form',
            height: 100,
            items: [{
                xtype: 'textfield',
                fieldLabel: 'field label',
                value: '1',
                enableKeyEvents: true,
                listeners: {
                    keyup: function() {
                        console.log("key Up called");
                    },
                    change: function() {
                        console.log('changed');
                    }
                }
            }]
        }]
    })
});

Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2cbd

Thanks event working fine ! now can we get text character in function 'Obj' which we are entering in text filed, so that we can count the length of character ? — Hemant, Jan 25 '18 at 10:09

AswathyPrasad · Accepted Answer · 2018-01-25T12:16:49.913

1

You are almost there. In the doc field key events, it is written that key events get fired only if enableKeyEvents is set to true.

           {
                xtype: 'textfield',
                fieldLabel: 'Address',
                width: '100%',                    
                enableKeyEvents : true,
                listeners: { 
                    keyup : function(obj) { 
                     alert('test fire ' + obj.getValue()); 
                     } 
                   }
            },

edited Jan 25 '18 at 12:16

answered Jan 25 '18 at 08:55

AswathyPrasad

353
4
12

Thanks event working fine ! now can we get text character in function 'Obj' which we are entering in text filed, so that we can count the length of character ? – Hemant Jan 25 '18 at 10:06
Use the getValue() method of the textfield object :- obj.getValue(). Have a look at the modified code above – AswathyPrasad Jan 25 '18 at 12:16

How to use the onkeyup event to a TextField?

2 Answers2