jQuery UI API - :tabbable Selector

Category

Selectors | UI Core

Usage

Description:Selects elements that can be focused via the tab key.

jQuery( ":tabbable" )

Some elements are naturally focusable via the tab key (tabbable), while others require an explicit positive tab index. In both cases, elements must be visible to be tabbable.

Elements of the following types are tabbable if they do not have a negative tab index and are not disabled:input、select、textarea、buttonandobjectAnchors if they have ahrefor a positivetabindexattribute, are tabbable.areaElements that are inside a named map and have ahrefattribute, and a visible image uses that map, are tabbable. All other elements based solely ontabindexattributes and visibility are tabbable.

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

Examples

Select elements that can be focused via the tab key and highlight them with a red border.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>:tabbable Selector 实例</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="没有 tabindex"></div>
<div><input tabindex="5" value="正的 tabindex"></div>
<div><input tabindex="-1" value="负的 tabindex"></div>
 
<script>
$( ":tabbable" ).css( "border-color", "red" );
</script>
 
</body>
</html>

Other Extensions