How to find next focusable item in HTML using JQuery

In this post we will found how to find the next focusable item and focus into that element in HTML using JQuery. Among lots of element sometime its getting necessary to focus on the next element on some ENTER or TAB click in HTML. So, how to do this. Let’s find out.

First create a HTML page with few dummy elements.

<div id="div1">

    1.<input type="text" />

    2.<input type="text" />

</div>

<div id="div2">

    3.<input type="text" id="input3" />

    4.<a href="#">Anchor</a>

    5.<input type="text" />

</div>

We have designed a HTML page with different focusable elements (textbox and anchor) and different sections (div1 & div2).


Now as per HTML structure the TAB will go from first text box to last text box. But how programmatically we will find the next focusable item after a certain element.

 var nextTabbable = $("#input3").next(":tabbable").length

                    ? $("#input3").next(":tabbable")

                    : $("#input3").parent().next().find(":tabbable").first();

Using "tabbable" we can find the next focusable or tabbable item in the HTML structure. So  nextTabbable  is the item which is next after "input3" in this structure. Now write your desired code upon that. For more information please visit :tabbable Selector.