Web design tabIndex element

Time:2021-9-14

TabIndex is to press the tab key to get the defined tabIndex elements in order and set the focus between the elements.

Anyone who has done or filled in the form will find that using the tab key can get the focus of each input one by one. In fact, this thing can be modified, such as not wanting to be obtained, or changing the order in which it is obtained.

When filling in the form (registration, login or others), many users directly press the tab key to jump to the next text box without using the mouse. Wait until all the things are filled in, and then submit. This is a very good and convenient function. My personal habit is that when I fill in all things, I usually click the submit button with the mouse, and I don’t want the tab to make the focus jump to the button, but I rarely find that I can’t jump to the button with the tab. I don’t know if it’s too BT -#-!!!

If you don’t want to get the focus of something, you can tabIndex = – X and make the value of tabIndex negative. In this way, tab will skip directly.

Let’s take a simple form as an example:


Tip: you can modify some code before running
Copy code

The code is as follows:

<form method=”post” action=”#”>
<p><label for=”t1″>The first pressing Tab to set focus to textbox </label><input type=”text” tabindex=”1″ /></p>
<p><label for=”t2″>The Second pressing Tab to set focus to textbox </label><input type=”text” tabindex=”2″ /></p>
<p><label for=”t3″>The Third pressing Tab to set focus to textbox </label><input type=”text” tabindex=”3″ /></p>
<p>Press Tab, Not focusing to textbox <input type=”submit” tabindex=”-1″ value=”SendInfo” /></p>
</form>

Using the tab key, the order of getting focus is sorted by the value of tabIndex. In the above example, T1, T2 and T3 obtain the focus in turn. At T4, since the value of tabIndex is – 1, T4 will not obtain the focus, but directly jump to the next element to obtain the focus.
The tabIndex values of T1, T2, T3 and T4 can be changed arbitrarily according to the actual demand, and the tab focus is obtained from small to large according to the value.
TabIndex is used to make these drops…