Conception Web TabIndex Element_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

Conception Web TabIndex Element_HTML/Xhtml_Production de pages Web

WBOY

Libérer： 2016-05-16 16:42:14

original

1441 Les gens l'ont consulté

TabIndex consiste à appuyer sur la touche Tab pour obtenir séquentiellement le focus des éléments TabIndex définis entre chaque élément.

Quiconque a créé ou rempli un formulaire constatera qu'en utilisant la touche Tabulation, vous pouvez obtenir le focus de chaque entrée une par une. Ces éléments peuvent en fait être modifiés, par exemple en ne voulant pas être obtenus ou en modifiant l'ordre dans lequel ils sont obtenus.

Lors du remplissage d'un formulaire (inscription, connexion ou autre), de nombreux utilisateurs appuient directement sur la touche Tab pour passer à la zone de texte suivante sans utiliser la souris. Attendez que tout soit rempli, puis cliquez sur Oui Soumettre, ce qui est une fonctionnalité très intéressante et pratique. Mon habitude personnelle est qu'après avoir rempli toutes les choses, j'utilise généralement la souris pour cliquer sur le bouton d'envoi, et je ne veux pas que Tab fasse passer le focus sur le bouton, mais je trouve rarement que l'utilisation de Tab ne sautera pas au bouton. Sur le bouton, je ne sais pas si mes habitudes personnelles sont trop BT-_- !!!

Si tu ne veux pas que quelque chose soit concentré, tu peux tabindex=-x, afin que la valeur de tabindex soit négative. Dans ce cas, Tab sautera directement.

Ce qui suit est un formulaire simple à titre d'exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>Que fait TabIndex ?</title>
<style type="text/css">
html, corps {
police : 14px/200 % Géorgie, Verdana, Arial, "宋体" ;
}
</style>
≪/tête>
<corps>
<form method="post" action="#">
<p><label for="t1">La première pression sur Tab pour définir le focus sur la zone de texte </label><input type="text" id="t1" tabindex="1" />< ;/p>
<p><label for="t2">La deuxième pression sur Tab pour définir le focus sur la zone de texte </label><input type="text" id="t2" tabindex="2" />< ;/p>
<p><label for="t3">La troisième pression sur Tab pour définir le focus sur la zone de texte </label><input type="text" id="t3" tabindex="3" />< ;/p>
<p>Appuyez sur Tab, ne vous concentrez pas sur la zone de texte <input type="submit" id="t4" tabindex="-1" value="SendInfo" /></p>
</formulaire>
</corps>
</html>

Astuce : Vous pouvez modifier une partie du code avant d'exécuter

Copier le code

Le code est le suivant :

À l'aide de la touche Tab, l'ordre d'obtention du focus est trié par la valeur de tabindex. Dans l'exemple ci-dessus, t1, t2 et t3 obtiennent le focus en séquence. Lorsqu'il atteint t4, puisque la valeur de TabIndex est -1, t4 n'obtient pas le focus, mais passe directement à l'élément suivant qui obtient le focus.
　Les valeurs TabIndex de t1, t2, t3 et t4 peuvent être modifiées arbitrairement en fonction des besoins réels, et le focus Tab est obtenu en fonction de la valeur de petite à grande.
TabIndex est utilisé pour ce faire. . .