PDA

View Full Version : Keyup on a TextField/SearchFIeld



arlo.carreon
3 Aug 2010, 10:09 AM
I am using this searchfield:


var searchField = new Ext.form.SearchField({
value:'Address OR MLS',
cls:'searchfield',
listeners: {
focus: function(){ searchField.setValue(''); },
blur: function(){ if( searchField.getValue()=='' ){ searchField.setValue('Address OR MLS'); } },
keyup: function(e){
// Loop through the object
for(var key in e)
alert(key+'='+e[key]);
}

}
});



What I am trying to accomplish is to capture what key is being pressed. If the key is the ENTER KEY (13), then I want to do an action. So far I have not been able to get the keyCode for the key pressed.

The above code is me iterating through the passed parameter, with no luck in finding the keyCode. :(

I am sure this is an easy answer, but I have been having trouble with this. Any help would be awesome!

evant
3 Aug 2010, 10:47 PM
The keyup event wasn't passing the event object, which has since been corrected. It will be part of the next release.

In the interim:



Ext.override(Ext.form.Field, {
onKeyUp : function(e) {
this.fireEvent('keyup', this, e);
}
});

robertj98
4 Aug 2010, 12:20 AM
Evan,

Is this a similar issue to the one where the search field does not seem to be firing the submit function when you press Enter in the field. This seems to be broken in 0.92 and 0.93.

Robert

arlo.carreon
4 Aug 2010, 6:17 AM
Evant,

I have tried the suggested override, but I still do not seem to have access to the keyCode attribute. Besides the suggested override, should I change anything else in this code?



var searchField = new Ext.form.SearchField({
value:'Address OR MLS',
cls:'searchfield',
listeners: {
focus: function(){ searchField.setValue(''); },
blur: function(){ if( searchField.getValue()=='' ){ searchField.setValue('Address OR MLS'); }
else{ doQuickSearch( searchField.getValue() ) }
},
keyup: function(e){
alert(e.keyCode);
}

}
});



Thanks.

evant
4 Aug 2010, 5:06 PM
They parameters aren't correct. The first thing passed is the field object, the second argument is the event.

cabennett85
12 Aug 2010, 3:42 PM
I'm having trouble with this as well. I've added in the override suggested above and my code is:


this.standingsTextField = new Ext.form.SearchField({
id: 'standingsTextField',
label: 'Search Team',
flex: .85,
listeners: {
keyup: function(thisField, e) {
console.log(e.keyCode);
}
}
});

I'm getting undefined in my console log.

Also, is attaching this keyup listener the only way to detect a keyboard enter on a search field. More specifically, on the ipad keypad for the search field I have the large 'Search' key on the right. Is the only way to utilize this with the keyup listerner?

evant
12 Aug 2010, 5:22 PM
console.log(e.browserEvent.keyCode);

gmanraj
8 Oct 2010, 8:46 AM
how to hide the keypad programmatically? is there any event for TextField or FormPanel when the keypad 'Return' or 'Search' or 'Go' pressed?

gabrielstuff
8 Oct 2010, 9:49 AM
To test the key on the keypad use this site with an iPhone :
http://unixpapa.com/js/testkey.html

The go is ENTER = 13

gmanraj
11 Oct 2010, 6:25 AM
thanks a lot. It works very well. I will be very happy if i get any idea about hiding the keypad when the user tap the 'Search' or 'Enter' key in iPhone (also for Android).

gmanraj
13 Oct 2010, 8:13 PM
I have done with key identifier 'enter' (in iPhone simulator i got key code is 10, so i have used key identifier. It works fine in the iPhone and Android) to start search and field.blur() to hide the keypad. thanks.

vinodh_nair
1 Sep 2011, 3:39 AM
How do I capture the reset event of search field? I tried multiple options, but nothing seems to work.
Do I need to turn off the clear field, and add a custom button with "X" image to make it work?

pratik016
12 Sep 2011, 5:15 AM
To test the key on the keypad use this site with an iPhone :
http://unixpapa.com/js/testkey.html

The go is ENTER = 13

Hey.
Thanks for this link. its save my lots of time. although I have spend more time to fire keyup event on extjs. but no luck. this is helped me a lot.
Thanks again.