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 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

Translate »