jQuery UI API - :focusable Selector

Category

Selectors | UI Core

Usage

Description:Selects elements that can be focused.

jQuery( ":focusable" )

Some elements are natively focusable, while others require an explicit tab index. In both cases, to be focusable, the element must be visible.

Elements of the following types are focusable if they are not disabled:input、select、textarea、buttonandobject. An anchor if it hashrefortabindexattribute, then it is focusable.areaAn element, if it is inside a named map and hashrefattribute, and there is a visible image using that map, then it is focusable. All other elements entirely based ontabindexattribute and visibility are focusable.

Note: Elements with a negative tab index are:focusable, not:tabbable。

Examples

Selects focusable elements and highlights them with a red border.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>:focusable Selector 实例</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="文本输入"></div>
<div><a>不带有 href 的锚</a></div>
<div><a href="../index.html">带有 href 的锚</a></div>
<div><p>不带有 tabindex 的段落</p></div>
<div><p tabindex="1">带有 tabindex 的段落</p></div>
 
<script>
$( ":focusable" ).css( "border-color", "red" );
</script>
 
</body>
</html>

Other Extensions