Search code examples
javascriptdom-events

Click and focus on input with CTRL

I have a grid of inputs. User is allowed to tab through them and click them.

When user is tabbing through inputs - next input is focused (event triggered by the browser). Focus event handler should add a "selected" class to an input.

When user clicks on an input - browser triggers "focus" event first and then "click" event. Click event handler should add "selected" class to an input.

Goal: I'm need to allow the user to select (add "selected" class to) multiple inputs with ctrl+click and still allow to tab through inputs.

Problem: Focus event is fired before the click event and in consequence it removes the selection from all inputs.

Simplified version of the code: http://jsbin.com/emuboq/1/edit

Solution

  • See my edits: http://jsbin.com/emuboq/7/edit

    Not sure this is what you need, so let me know if not.