HTML tutorial: Use tabIndex to easily implement web page navigation

Recently, when I was entering form data on a website, I filled in one column and clicked the [Tab] key to move to the next column; when I looked up, I was surprised to find that the cursor jumped to another column at the bottom of the page. middle. I used my mouse to move the cursor into the correct text field, but soon the [Tab] key problem started again. This situation made me want to take a look at page design and how the tabIndex property aids navigation via the keyboard.

Access elements via the [Tab] key

The HTML DOM tabIndex attribute allows you to set or return the tab order of an HTML element. IE
4.0 is the first to support this feature. Initially, only elements that are truly accessible via the [Tab] key are supported, such as input fields, links, etc. Today, all web browsers support this feature, as well as all elements displayed on the page. Before applying it, you can double-click the HTML specification to ensure that an element supports this feature.

　 tabIndex feature

Applying the tabIndex feature is a simple and straightforward process. For example, the following HTML source code assigns the tabIndex value 1 to the input field, which is the first column in the tab order:

　

　 If the [Tab] key is initially selected, web pages with this input field will move the cursor to the firstName field.

When assigning a value to the tabIndex attribute, you should pay attention to several issues. Here are a few assignment rules: Elements with a tabIndex of 0 are sorted according to their source code (or default page behavior).

　 A tabIndex value greater than 0 sets its tab order. All elements with a positive tabIndex value appear before all elements with a 0 tabIndex value.

　If you make a mistake and assign the same tabIndex to multiple elements, like other elements, they will be processed with a 0 value tabIndex.

　Assign tabIndex to -1, then this element will be ignored when using the [Tab] key. Note: If a value of -1 is used, the onfocus and onblur events are still activated.

　The value of tabIndex can be any number between 0 and 32767.

　 The sample HTML code in Listing A assigns a tabIndex value to each item on the page. Input fields and DIV tags include the tabIndex attribute, allowing users to peruse page elements using the keyboard. (The DIV tag doesn't provide much information about getting focus, but I wanted to illustrate the use of tabIndex with non-input elements.) Buttons with a value of -1 are assigned a value, and they are ignored when the [Tab] key is applied. .

When the input element is full (reaches the maximum length), you can add a small JavaScript script to implement the automatic positioning function. This is a basic function, let’s see how the script implements its functionality:

　function checkLen(x,y) {
if
(y.length==x.maxLength) {
var next=x.tabIndex
if (next document.getElementById("frmTest").length)
{
document.getElementById("frmTest").elements[next-1].focus()
} }
}

The function accepts two variables. The first variable is the input field, and the second variable contains the value of the field. And compare the length of the column to the maximum acceptable length of the column. If they are equal (i.e. the column is full), the value of tabIndex is read from the column; if the value is less than the maximum length, the focus is moved to the next column.

This function assigns a value to the onkeyup event of each column, so this function must be called every time a value is entered in the column to check whether it reaches the maximum length. If the maximum value is reached, the cursor moves to the next column in tab order. The source code in Listing B adds this function to the example above.

Improve accessibility

Specifying tabIndex for elements can help users who often use keyboards more conveniently access the network interface; non-standard users such as PDAs, mobile phones, and screen readers used by disabled people can also Benefited from. Anything that extends the capabilities of an application is beneficial.

A piece of cake You may spend a lot of time designing web forms so that they are visually appealing and can be processed correctly by back-end server components. However, you may have neglected to test it with non-standard technologies or browsers. A typical example is to give up the mouse and rely on the keyboard to navigate the form. The HTML standard includes the tabIndex attribute, which allows you to control which items are accessed via the [Tab] key.

The above is the content of HTML tutorial: using tabIndex to easily realize web navigation. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!