HTML Tutorial: Easy Web Navigation with TabIndex

Recently, when I entered tabular data on a Web site, I filled out a column and clicked [Tab] to move to the next column; When I looked up, I was surprised to find the cursor jumps to another column below the page. I use the mouse to move the cursor to the correct text bar, but soon the [Tab] key again appears to be the problem. This situation makes me want to know the page design and how the TabIndex property can help navigate through the keyboard.

accessing elements through the [Tab] key

The HTML DOM tabindex feature allows you to set or return the tab order of an HTML element. IE 4.0 supports this feature first. Initially, only elements that are truly accessible through the [TAB] key are supported, such as input columns, links, and so on. Today, all Web browsers, and all of the elements displayed on the page, support this feature. Before applying it, you can double-click the HTML specification to ensure that an element supports this attribute.

TabIndex characteristics

The application of TabIndex characteristics is a simple and straightforward process. For example, the following HTML source code assigns the TabIndex value of 1 to the input bar, which is the first column in the tab order:

<input id= "Idfname" name= "FirstName" tabindex= "1"/>

If you initially select the [Tab] key, the page with this input bar will move the cursor to the FirstName bar.

When assigning values to TabIndex, pay attention to several problems. Here are a few assignment rules:

Elements with a value of 0 TabIndex are sorted according to source code (or default page behavior).

The TabIndex value greater than 0 sets its tab order. All elements with positive tabindex values appear before all elements with a value of 0 tabindex.

If you make a mistake, assign the same tabindex to multiple elements, like other elements, they will be processed in a 0-value tabindex.

Assign the TabIndex to-1, the element is ignored when the TAB key is used. Note: If you use a value of -1, the onfocus and onblur events are still started.

The TabIndex value can be any number between 0 and 32767.

The sample HTML code in List A assigns a TabIndex value to each item in the page. The input bar and div tag contain the TabIndex feature, allowing users to read the page elements carefully with the keyboard. (The div tag doesn't provide much information about getting focus, but I want to use a TABINDEX element to illustrate the application.) A button with a value of-1 is assigned and is ignored when the [Tab] key is applied.

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

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 column. The length of the column is compared with the acceptable maximum length of the column. If they are equal (that is, the column is full), the TabIndex value is read from the column, and if the value is less than the maximum length, the focus is moved in the next column.

This function assigns a value to the onkeyup event for each column, so you call the function every time you enter a value in the column to verify that it reaches its maximum length. If the maximum is reached, the cursor is moved to the next column in the tab order. The source code in List B adds this function to the example above.

Improve access Capabilities

Specifying TabIndex for elements helps make it easier for users who often use the keyboard to touch the network interface; non-standard users, such as PDAs, mobile phones, and screen readers for people with disabilities also benefit from this. Any event that expands the functionality of the application software is beneficial.

It's a little thing.

You may have to spend a lot of time designing Web forms that make them visually appealing and can be handled correctly by the backend server components. However, you may have overlooked the need to test it with non-standard techniques or browsers. A typical example is to discard the mouse and rely on the keyboard to navigate the form. The HTML standard contains the TabIndex feature, which allows you to control which items are accessed through the [Tab] key.