HTML Input text field overlapping onkeydown events

Question

Hi guys,

I have custom grid made of HTML tables. User can enter values into each cell, then automatically move to the next cell below when they press the DOWN key or ENTER KEY, much like in a spreadsheet.

My problem is, when user types quickly and pressed the DOWN key before he releases another key on keyboard, the last input character is missing.

I understand the sequence of events in HTML input fields:

1. keydown
2. keypress
3. keyup

If the user pressed DOWN key while he has not yet release the other key, the keyup event for the other key never gets called.

Also, when I a key on the keyboard, while the text is displayed on the text field, when I access txtfield.value or txtfield.innerText the value is not available yet. When will this be available?

Any ideas how can I resolved this? I would really appreciate you help. Thanks

Answer 1

Hmmm, this is a pretty complicated requirement. Especially when you include the keydown variance between browsers. It also depends on how you've bound your key trapping - is it per cell (input) or a single overall trap for the whole grid? It sounds like it's the latter (since you call it an HTML table, which sounds like you might not even be using inputs).

To catch the enter key you'll want to use keydown (since you want to prevent default action which would be form submit). I'm guessing you're also trapping the down key here. If you instead trap the down key keyup, then whatever the previous key was should be released first, and if it isn't then it's probably not incorrect to output the value in the next cell.