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

Problems with index and FROM_UNIXTIME in mysql

Web Design TabIndex Element

Problems with index and FROM_UNIXTIME in mysql

10 skills that make front-end developers worth millions

Best Practices Guide for MySQL Partitioned Tables

Centos 7.4 server time synchronization configuration method [based on NTP service]

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

How to use anti-shake and throttling in Vue

JavaScript implements large file upload processing

Implementation of one-click TLS encryption for docker remote api

Sharing of SQL optimization experience when offset is too large during MySQL paging

Summary of using the exclamation mark command (!) in Linux

Recommend

Docker image optimization (from 1.16GB to 22.4MB)

Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects

Detailed explanation on reasonable settings of MySQL sql_mode

Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse

vite2.x implements on-demand loading of ant-design-vue@next components

Detailed explanation of Web front-end performance optimization: resource merging and compression

MySQL 5.7 installation MySQL service cannot be started but the service does not report any errors

How to use custom images in Html to display checkboxes

Tutorial on installing MySQL 5.6 using RPM in CentOS

XHTML introductory tutorial: Application of table tags

WeChat applet implements sorting function based on date and time

Detailed tutorial on how to publish springboot projects through docker plug-in in IDEA

mysql5.5 installation graphic tutorial under win7

Building a LEMP (Linux+Nginx+MySQL+PHP) environment under CentOS 8.1 (tutorial details)

Using vue3 to imitate the side message prompt effect of Apple system