jQuery UI API -: focusable Selector
category
Selector (Selectors) | the UI core (UI Core)
usage
Description: Choose a focused element.
Some elements themselves are focusable (focusable), while other elements need to explicitly set the tab index. In both cases, in order to focus (focusable), the element must be visible.
The following types of elements, if not disabled, it is focusable (focusable): input
, select
, textarea
, button
and object
. If the anchor with href
or tabindex
attributes are focusable (focusable). area
elements If a named map, and with a href
attribute, and there is a visible image using the map, it is focused (focusable). All other based entirely on the tabindex
attribute and visibility of the element is focusable (focusable).
NOTE: tab element with a negative index is :focusable
, not :tabbable
.
Examples
Select focusable element and highlighted with a red border.
<! Doctype html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title>: focusable Selector Examples </ 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 </a> without the href </ div> <Div> <a href="#"> anchor </a> with the href </ div> <Div> <p> without tabindex paragraph </ p> </ div> <Div> <p tabindex = "1"> the paragraph with tabindex </ p> </ div> <Script> $ ( ": Focusable") .css ( "border-color", "red"); </ Script> </ Body> </ Html>