How to allow tab on a custom control in HTML/Javascript (Aurelia)

Question

I have created a custom control in Aurelia which is just a visual made up of divs (no actual input controls). When I tab through my form I would like to call a function to do stuff when the tab lands on my custom control, but it does not land on it as it is not an input. How do I get the tab to land on my custom control?

This will also apply for Angular and HTML in general.

Answer 1

If you wish for a user to tab onto something, you should at first look into using other elements than div 's for said element (maybe a button?).

However, if you do need to use a div you can add tabindex="0" to it:

<div class="custom-control" tabindex="0"></div>

More info on the tabindex attribute here