4

Is anyone having the same issue? When typing quickly into a textbox and skip to a next textbox (by pushing the 'tab' key) the keyup event is registered from the wrong element.

Behaviour:

  1. Precondition: We have two textboxes; with javascript registrered to the key-up event
  2. Action: Type quicky in textbox and switch to next textbox with 'tab' key.
  3. End situation: All the pressed characters are rendered in the first textbox and the second textbox is selected (but empty); Javascript keyup events registers the last x (depends on type speed) from the last element.(unexpected)

Expected end situation:
- All the pressed characters are rendered in the first textbox and the second textbox is selected (but empty); Javascript: only the last ('tab' keyup event) is registered from the last element.

(this problem is in plain javascript but also propagates to jQuery onkeyup events)

Tested in browsers: - Chrome (Version 49.0.2623.87 m (64-bit)) - FireFox (45.0.1) - Edge

JSFiddle: https://jsfiddle.net/xk09542f/4/

js:

document.getElementById('inp1').onkeyup = function(e) {
     console.log(this.id + ' ' + e.which);
}
document.getElementById('inp2').onkeyup = function(e) {
  console.log(this.id + ' ' + e.which);
}

html:

<input id="inp1" type="text">
<input id="inp2" type="text">

output: see console;

Chris
  • 41
  • 1
  • 3
    you know that `keyup` is fire when you release the key ? so if you release the key after you pressed tab then it's the expected behaviour – Hacketo Mar 22 '16 at 13:05
  • Take this fiddle this would be fairly esier for you to debug ;) https://jsfiddle.net/xk09542f/5/ – Baldráni Mar 22 '16 at 13:09
  • It even gets stranger when also printing the key down events too; this also registers the events for the wrong element. see fiddle: jsfiddle.net/xk09542f/6 See image: [Image](http://s7.postimg.org/c7naut3t7/jq_keyup.png). – Chris Mar 22 '16 at 13:28

1 Answers1

1

Actually what you see in the console is the expected result, because : When you press tab key its handle 2 events first one is keyDown (which will move you to the second textField) now you are in second textField and you still under keyDown event , so when you release the tab key its handle your keyUp event and this last event happened on the second textField.

Ahmed
  • 1,666
  • 17
  • 23