jQuery UI API - :tabbable Selector
Category
Usage
Description: Selects elements that can be focused using the tab key.
Some elements are inherently focusable with the tab key (tabbable), while others require an explicit positive tab index. In both cases, to be focusable with the tab key (tabbable), the element must be visible.
The following types of elements are focusable with the tab key (tabbable) if they do not have a negative tab index and are not disabled: input, select, textarea, button, and object. Anchors are focusable with the tab key (tabbable) if they have an href or a positive tabindex attribute. area elements are focusable with the tab key (tabbable) if they are within a named map, have an href attribute, and there is a visible image using that map. All other elements are focusable with the tab key (tabbable) purely based on the tabindex attribute and visibility.
Note: Elements with a negative tab index are not :tabbable.
Example
Selects elements that can be focused with the tab key and highlights them with a red border.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>:tabbable Selector Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
input {
border: 1px solid #000;
}
div {
padding: 5px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div><input value="No tabindex"></div>
<div><input tabindex="5" value="Positive tabindex"></div>
<div><input tabindex="-1" value="Negative tabindex"></div>
<script>
$( ":tabbable" ).css( "border-color", "red" );
</script>
</body>
</html>