jQuery UI API - :focusable Selector
Category
Usage
Description: Selects elements that can be focused.
Some elements are inherently focusable, while others require an explicit tab index. In both cases, to be focusable, the element must be visible.
The following types of elements are focusable if not disabled: input, select, textarea, button, and object. Anchors are focusable if they have an href or tabindex attribute. area elements are focusable if they are within a named map, have an href attribute, and there is a visible image using the map. All other elements are focusable based solely on the tabindex attribute and visibility.
Note: Elements with a negative tab index are :focusable, not ``.
Example
Selects focusable elements and highlights them with a red border.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>:focusable Selector Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
input, a, p {
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="Text Input"></div>
<div><a>Anchor without href</a></div>
<div><a href="#">Anchor with href</a></div>
<div><p>Paragraph without tabindex</p></div>
<div><p tabindex="1">Paragraph with tabindex</p></div>
<script>
$( ":focusable" ).css( "border-color", "red" );
</script>
</body>
</html>