ExtJS textfield and key events — keydown, keypress and keyup


Generally, when your problem is to validate for the input value for every character entered into the text box, you look for some events which are related to key pressing. So, what are the choices that you have (or you can possibly have)
keydown — Keydown input field event.
keypress — Keypress input field event.
keyup — Keyup input field event.

All these events only fire if enableKeyEvents is set to true in the TextField config.
and if you are optimistic enough then you can also think about valid and invalid events.

When you use just one of the keydown, keypress or keyup the behavior looks very confusing. Let’s consider a an example where a textfield is meant for email input (remember ExtJS has its own vType, which validates your email address using regular expression like /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/;). In this case whenever you have value like sandeep.kumar@walkingtree.in, the text field shows that value is correct, while the function inside the keydown event finds that the field is invalid (through form’s isValid method). However, if you press any key (even space or backspace) then keydown event’s function (form’s isValid method) finds that value is correct.

One of the way to solve such issue is to use two events in your listener config : keydown and keyup. However, you must be cautious while using events like keydown and keyup and even more cautious when you use them together.

Tagged with: , , , ,
Posted in Sencha ExtJS
3 comments on “ExtJS textfield and key events — keydown, keypress and keyup
  1. Wouter Vos says:

    So how to use the keydown event? Especially in Sencha Touch if possible. Currently can’t get it working: http://stackoverflow.com/questions/26547793/onkeydown-in-sencha-touch

  2. Venkatesh Teja says:

    Thanks a lot… It was help full me…

  3. diego says:

    You save my life 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: