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
Recommend
Detailed explanation of how to install mysql5.6 from binary installation package in centos7 environment
This article describes how to install mysql5.6 us...
Basic steps to use Mysql SSH tunnel connection
Preface For security reasons, the root user of My...
Steps to install MySQL 5.7.10 on Windows server 2008 r2
Install using the MSI installation package Downlo...
MySQL index optimization: paging exploration detailed introduction
Table of contents MySQL Index Optimization Paging...
Detailed explanation of commands to read and write remote files using Vim in Linux system
Set vim's working mode (temporary) :set (mode...
Solution to no Chinese input method in Ubuntu
There is no solution for Chinese input method und...
MySQL isolation level detailed explanation and examples
Table of contents 4 isolation levels of MySQL Cre...
An example of dynamically implementing different styles of data in a column of el-table of element ui
Problem Description In the framework of Ele.me UI...
The latest MySQL 5.7.23 installation and configuration graphic tutorial
The detailed installation and configuration of th...
How to deploy nginx with Docker and modify the configuration file
Deploy nginx with docker, it's so simple Just...
Element-ui's built-in two remote search (fuzzy query) usage explanation
Problem Description There is a type of query call...
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
Analysis of the reasons why MySQL field definitions should not use null
Why is NULL so often used? (1) Java's null Nu...
Learn javascript iterator
Table of contents Introduction What does an itera...
The correct way to migrate MySQL data to Oracle
There is a table student in the mysql database, i...