Trouver l’étiquette html associée à une entrée donnée

Question

Disons que j’ai un formulaire html. Chaque entrée/select/textarea aura un correspondant avec la attribut défini sur l’id de son compagnon. Dans ce cas, je sais que chaque entrée aura seulement une seule étiquette.

Compte tenu d’un élément input en javascript — via un événement onkeyup, par exemple — ce qui est le meilleur moyen de le trouver a associé étiquette ?

Answer 1

Si vous utilisez jQuery vous pouvez faire quelque chose comme ça

Si vous n’utilisez pas de jQuery, que vous aurez à chercher pour le label. Voici une fonction qui prend l’élément comme argument et retourne l’étiquette associée

Answer 2

Tout d’abord, scan de la page pour les étiquettes et attribuer une référence à l’étiquette de l’élément de formulaire :

Ensuite, vous pouvez simplement aller :

Pas besoin d’une recherche de tableau  :)

Answer 3

Je suis un peu surpris de voir que personne ne semble savoir que vous êtes parfaitement autorisé à faire:

<label>Put your stuff here: <input value="Stuff"></label>

Ce qui ne sera pas obtenir ramassé par aucune des réponses proposées, mais va de l'étiquette de l'entrée correctement.

Voici un code qui fait prendre ce cas en compte:

$.fn.getLabels = function() {
    return this.map(function() {
        var labels = $(this).parents('label');
        if (this.id) {
            labels.add('label[for="' + this.id + '"]');
        }
        return labels.get();
    });
};

Utilisation:

$('#myfancyinput').getLabels();

Quelques remarques:

• Le code a été écrit pour plus de clarté, pas pour la performance. Plus performante des solutions de rechange peuvent être disponibles.
• Ce code prend en charge l'obtention de labels de plusieurs éléments en une seule fois. Si ce n'est pas ce que vous voulez, de les adapter si nécessaire.
• Ce n'est pas toujours prendre soin des choses comme aria-labelledby si vous étiez à les utiliser (laissé comme exercice au lecteur).
• À l'aide de plusieurs étiquettes est une affaire délicate quand il s'agit de soutien dans les différents agents utilisateurs et technologies d'assistance, afin de puits d'essai et de les utiliser à vos propres risques, etc. etc.
• Oui, vous pourriez également mettre en œuvre sans l'aide de jQuery. :-)

Answer 4

Plus tôt...

Par la suite...

Commentaire de mauvaise humeur : Oui, vous pouvez aussi le faire avec JQuery. :-)

Answer 5

avec jquery, vous pourriez faire quelque chose comme