Scroll Top

ExtJS textfield and key events — keydown, keypress and keyup

Getting your Trinity Audio player ready...

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 behaviour looks very confusing. Let’s consider 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 ways 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.

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.