Discussion :

[pitoumad]

Bonjour le forum
Je travaille sur un formulaire qui contient un champ date, et à côté une image qui ouvre un calendrier en popup. J'aimerai que lorsque je suis dans le champ date et que je tape sur la touche Tabulation, le focus ne passe pas sur mon image, mais passe directement au champ d'après.
Comment faire ?
J'ai essayé avec style="-moz-user-focus: ignore;" mais je crois que cela ne s'applique qu'aux input...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<td>
<input type="text" name="MaDate" value=<? echo $_POST['MaDate'];?>>&nbsp;
<a href='javascript:calendrier("Formulaire_saisie","MaDate")' 
style="-moz-user-focus: ignore;">
<img src=img/calend.jpg border=0 alt='Ouvrir le calendrier'>
</a>
</td>

Merci de votre aide

[Bisûnûrs]

Y a un attribut génial qui s'appelle tabindex.

[RomainVALERI]

Y a un attribut génial qui s'appelle tabindex.

Est-ce qu'il ne s'applique pas qu'aux input et a ?

edit après vérification* : il s'applique en définitive à ces éléments

A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA

...donc a priori pas les images

Envisage peut-être de transformer ton image en lien (<a>), en mettant l'image en background du lien, ou ce genre de choses...

* source w3c

[Bisûnûrs]

donc a priori pas les images

C'est pas grave, une image n'a jamais le focus, ici c'est le lien qui contient l'image qui a le focus et non l'image elle-même.

[RomainVALERI]

C'est pas grave, une image n'a jamais le focus, ici c'est le lien qui contient l'image qui a le focus et non l'image elle-même.

Laisse tomber, c'est mes yeux
*pas vu le <a> englobant l'image*

[Bisûnûrs]

Laisse tomber, c'est mes yeux

Ce sont des choses qui arrivent.
Et comme dirait ma grand-mère :
"Avant-hier, tu t'enorgueillissais de mes voitures."

Le trajet des index saute le second input radio : il fait le trajet 43 (input text) 44 (input radio) 46(input text) : et saute le 45 qui est mon second élément input radio : pourquoi ?

Globalement, un ensemble de boutons radio qui ont le même nom ne renvoie qu'une valeur en POST, donc n'est en réalité qu'un élément et non plusieurs (plusieurs éléments HTML mais un seul élément de formulaire).
Pour naviguer dans les boutons radio on utilise les flèches directionnelles.

[pitoumad]

Effectivement tabindex cela fonctionne bien, merci

J'ai une question toutefois sur les input radio

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="radio" name="Choix" tabindex="44" value="1"> Choix 1
<input type="radio" name="Choix" tabindex="45" value="2"> Choix 2

Le trajet des index saute le second input radio : il fait le trajet 43 (input text) 44 (input radio) 46(input text) : et saute le 45 qui est mon second élément input radio : pourquoi ?

[Macmillenium]

edit après vérification* : il s'applique en définitive à ces éléments ...donc a priori pas les images

Envisage peut-être de transformer ton image en lien (<a>), en mettant l'image en background du lien, ou ce genre de choses...

* source w3c

tabindex s'applique à tous les éléments, c'est autorisé en HTML 5 et recommandé par ARIA afin d'améliorer l'accessibilité des RIA dans certains cas de figures. Les navigateurs avaient, à priori, anticipé l'implémentation.
La valeur recommandée est 0 => tabindex="0"(*) rend l'élément focusable sans impacter l'ordre de tabulation.

* implémenté sur IE6+, FF2+, Safari4+ et Opéra10+

[RomainVALERI]

La valeur recommandée est 0 => tabindex="0"(*) rend l'élément focusable sans impacter l'ordre de tabulation.

Mais quand tu dis "sans impacter l'ordre de tabulation", tu veux dire qu'en bouclant sur l'ensemble des éléments avec TAB, on ne tombe jamais dessus, c'est bien ça ? Donc si je comprends bien ça ne fait *que* rendre l'élément sensible à la méthode focus() ? Ou bien ça ouvre aussi la possibilité d'écouter les événements focus et blur sur l'élément ? Et c'est indépendant de la présence d'un éventuel formulaire ? (oui, je pose beaucoup de questions mais ça fait pas mal)

Merci à toi en tous cas pour ces informations

[Macmillenium]

Mais quand tu dis "sans impacter l'ordre de tabulation", tu veux dire qu'en bouclant sur l'ensemble des éléments avec TAB, on ne tombe jamais dessus, c'est bien ça ?

Non, je voulais dire que la valeur 0 est neutre et par conséquent, ne modifie pas l'ordre de tabulation.

Ou bien ça ouvre aussi la possibilité d'écouter les événements focus et blur sur l'élément ? Et c'est indépendant de la présence d'un éventuel formulaire ?

Normalement oui, à vérifier