Latest web development tutorials

jQuery UI API -: focusable Selector

category

Selector (Selectors) | the UI core (UI Core)

usage

Description: Choose a focused element.

jQuery( ":focusable" )

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>