Web Design TabIndex Element

TabIndex is to press the Tab key to sequentially obtain the defined TabIndex elements and set the focus between each element.

Anyone who has made or filled out a form will find that using the Tab key can get the focus of each input one by one. This thing can actually be modified, for example, if you don't want it to be obtained, or change the order in which it is obtained.

When filling out a form (registration, login or other), many users do not use the mouse, but directly press the Tab key to jump to the next text box, wait until everything is filled in, and then submit. This is a very good and convenient feature. My personal habit is that after filling out all the information, I usually submit by clicking the submit button with the mouse, and I don’t want the Tab key to make the focus jump to the button. However, I rarely find that the Tab key does not jump to the button. I don’t know if it’s because of my personal habit-_-!!!

If you don’t want something to get the focus, you can set tabindex=-x to make the value of tabindex negative, so that Tab will skip it directly.

Here is an example using a simple form:

Tip: You can modify some of the 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" id="t1" tabindex="1" /></p>
<p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p>
<p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p>
<p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p>
</form>

When using the Tab key, the order in which the focus is acquired is sorted by the value of tabindex. In the above example, t1, t2, and t3 are focused in turn. When it comes to t4, since the value of TabIndex is -1, t4 will not get the focus, but will directly jump to the next element that gets the focus.
The TabIndex values of t1, t2, t3, and t4 can be changed arbitrarily according to actual needs, and the Tab focus is obtained from small to large values.
TabIndex is used to do this. . .

<<: WeChat applet implements search box function

>>: Detailed explanation of MySQL index selection and optimization