11548 sujets

JavaScript, DOM et API Web HTML5

Bug inédit: un jquery datepicker sur 2 input côte à côte

Bug inédit: un jquery datepicker sur 2 input côte à côte ne s'affiche que pour le 1er input

Bonjour,

Voici le code:
<td align="left" valign="middle">
	<label>
		Dates de remise
		<input type="text" class="datepicker ui-widget-content" rang="1" id="factorFrom" value="" size="10" readonly="readonly" />
		&nbsp;au <input type="text" class="datepicker ui-widget-content" rang="1" id="factorTo" value="" size="10" readonly="readonly" />
	</label>
</td>

Bug: quand on clique dans le 2ème input pour afficher le datepicker, ça s'affiche une seconde et puis ça bascule vers le datepicker du 1er input
On s'est gratté la tête pendant toute une journée avant de trouver la cause du bug, de plus que ça marche sur Opera mais ça ne marche pas sur FF/IE/Chrome/Safari. Forcément, il y a une erreur qui est tolérée sous Opera.

C'est donc une erreur DOM XHTML-Strict selon moi car il suffisait d'enlever le <label> qui entoure les input. En principe, un label ne doit pas contenir une autre balise surtout un <input>, n'est-ce pas?
Bonjour à toutes et à tous,

non, non, il n'y a pas de bug !

C'est un mauvais usage du label et du input que vous faites qui provoque cette anomalie.

En principe, il n'y a pas d'imbrication des inputs et des labels. Donc selon moi, votre anomalie est une méconnaissance de la syntaxe exacte du form !

Solution : révisez le code HTML ! Pour cela, il existe des mementos, dont celui de Raphaël !

J'ai mis 15 secondes pour voir le bug d'écriture, le temps de lire votre post !

Ah oui, j'ai fait le test, et je me suis bien rendu compte de cette anomalie, moi-aussi !

@+
Modifié par Artemus24 (17 Jun 2011 - 15:01)
Un label peut contenir un input ou un textarea. Mais un seul, pas deux comme dans ton code.


<td align="left" valign="middle"> 
    <label> 
        Date de début de remise 
        <input type="text" class="datepicker ui-widget-content" rang="1" id="factorFrom" value="" size="10" readonly="readonly" /> 
    </label> 
    <label> 
       Date de fin de remise 
    <input type="text" class="datepicker ui-widget-content" rang="1" id="factorTo" value="" size="10" readonly="readonly" /> 
    </label> 
</td>

Modifié par jb_gfx (17 Jun 2011 - 15:07)
Bonjour jb_gfx,

quel est l'intérêt d'imbriquer un input dans un label ?

Je sais très bien que dans la littérature on distingue les labels implicites et les labels explicites mais pour ma part, je ne vois aucun intérêt à imbriquer un quelconque input pour la simple raison qu'un label c'est essentiellement du texte !

Ce n'est qu'à la lecture de la page HTML dans le navigateur que l'on saura que ce label, se trouvant sur la même ligne est associé à ce input !

Pour le reste, je ne vois pas l'intérêt, sauf à créer des bugs dont nous sommes actuellement en pleine discussion. Smiley smile

@+
Artemus24 a écrit :

quel est l'intérêt d'imbriquer un input dans un label ?


Il y a deux manière valide d'attacher un label à un champ, soit avec l'attribut for soit en rendant le champ enfant du label. Tu peux utiliser l'une ou l'autre méthode, ça ne change rien et c'est valide dans les 2 cas.

Pour le reste je n'ai absolument pas compris ce que tu racontes.
Modifié par jb_gfx (17 Jun 2011 - 15:29)
J'ai mis un peu de temps avant de revenir sur ce sujet: si je lis bien un <label> ne peut donc contenir qu'une autre balise or j'avais mis 2 donc ce n'est pas XHTMLement correct??
Mais bon, j'ai modifié mon code en n'entourant par <label> que le texte!!!

a écrit :
Il y a deux manière valide d'attacher un label à un champ, soit avec l'attribut for soit en rendant le champ enfant du label. Tu peux utiliser l'une ou l'autre méthode, ça ne change rien et c'est valide dans les 2 cas.


Je ne comprends pas l'utilisation de "for" ici?

<label for="id_champ">Texte</label>
<input id="id_champ"...


Est la même chose que :


<label>Texte <input id="id_champ"...</label>
Sujet clos
Aller à