HTML Tabindex

The TABIndex attribute of HTML is usually not used in the development process, but a recent development requirement for rich interaction is summarized. This article is also included in my [front-end knowledge], Github link direct, welcome Star

As usual, put the official definition

Compatibility: Safari not supported!

Read this article

  • The role of the tabindex
  • The use of the tabindex
  • How can YOU leverage TabIndex to create a better user experience

preface

  • In our daily use of web pages, we can control the focus of some elements through the keyboard, so as to achieve the purpose of convenient access

  • Elements are focusable and non-focusable, and if you use tabIndex you can change the behavior associated with them

  • There are six elements in HTML that support focusing by default:

    • withhrefProperties of the<a>The label
    • withhrefProperties of the<link>The label
    • <button></button>The label
    • <input />Label (excluding withtype="hidden"Properties of)
    • <select></select>The label
    • <textarea></textarea>The label

  • The above elements can be focused by default using the Tab key and the JS focus() method

document.querySelector("a").focus();
Copy the code
  • useThe TAB keyWhen focusing elements, the order of focus is equal to the order in which the elements appear in the code, which we need when we do rich interaction optimizationtabindexThis property helps us optimize for a better user experience

The role of the tabindex

  • (1) Whether the element can be focused: by an input device such as a keyboard, or by the JS focus() method

  • ② When can elements be focused: when the user interacts with the page via the keyboard

  • In layman’s terms: When the user is using the keyboard, tabIndex is used to position HTML elements, that is, the order of focus when using the TAB key.

The scope of the tabindex

Tabindex can theoretically be used on almost any element

  • Tabindex can theoretically be used on almost any element, whether or not the element supports focus by default

Tabindex has three values: 0, -n (usually -1), and N(positive)

  • Tabindex =0, this element can get focus with the TAB key

    • And the order of access is focused according to the order of elements in the document. Even if the floating changes the order of display in the page, it is still located according to the order in the HTML document

  • Tabindex <=-1, this element cannot be obtained with the TAB key, but can be obtained through js

    • In this way, it is convenient for us to focus by setting the response events of the up, down and left keys in JS
    • The values- 1 ~ - 999There is no difference, but it is recommended for readability and consistency– 1

  • Tabindex >=1, this element can use the TAB key to get focus, and the priority is greater than tabindex=0

    • But in thetabindex>=1, the smaller the number, the more the first location;
    • If multiple elements have the same TabIndex, their relative order is determined by their order in the current DOM

The use of the tabindex

Tabindex determines the focus order

  • The larger the value of the positive integer, the later the order, and the nodes of the positive integer value are in order before the nodes of the zero value
  • Code:
// HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
Copy the code
  • Effect:

  • In focusable elements, sametabindexValue of the node, according toDOM nodeThe order determines the focus order
  • Code:
// HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
Copy the code
  • Effect:

Tabindex determines whether to focus

  • The node’stabindexSet to- 1Is used by the current nodeThe TAB keyCan’t focus
  • Code:
// HTML <button type="button"> Tabindex not set </button> <button type="button" tabindex="-1">tabindex === -1</button> <button type="button" tabindex="0">tabindex === 0</button> <button type="button" tabindex="1">tabindex === 1</button>Copy the code
  • Effect:

Tabindex with JS programming focus

  • throughtabindexWith JS, you can focus nodes that are not supported by default.tabindexAny integer value within the range is acceptable
  • Code:
// HTML <button type="button" @click="clickBtn()"> Tabindex ="-1"> this is a div</div> // JS clickBtn: function() {document.getelementById ('FocusDiv').focus(); }Copy the code
  • Effect:

How can YOU leverage TabIndex to create a better user experience

Rich interaction optimization for custom tags

  • When we create a custom tag, we can use it if the default behavior does not include the focus eventtabindexAdd focus to it so that it can focus sequentially like many focalizable nodes

Disables the focus operation for a specific node

  • Some floating layers and upper nodes, such astoastComponents, modal boxes, side pop-up information, etc. We don’t want the node to be captured by the user focus, we can put the nodetabindexSet to- 1Can avoid this problem

Complex lists control the focus order

  • Some complex tree structure or column structure can be used if we need the user’s operation order to focus on the book order we expecttabindexValue.

Past oliver

Long [word] baidu and good interview after containing the answer | the nuggets technology essay in the future

Front end practical regular expression & tips, all throw you 🏆 nuggets all technical essay | double festival special articles

A few lines of code to teach you to solve wechat poster and TWO-DIMENSIONAL code generation

Vue3.0 Responsive data principle: ES6 Proxy

Read on to make your interviewer fall in love with you

Remember a painful experience

Front-end performance optimization -HTML, CSS, JS parts

Front-end performance optimization – Page loading speed optimization

Front-end performance optimization – Network transport layer optimization

Follow the wechat official account [Quanzhendaolu] to get more good articles and free books!