webentwicklung-frage-antwort-db.com.de

Findet das HTML-Label, das einer bestimmten Eingabe zugeordnet ist

Nehmen wir an, ich habe ein HTML-Formular. Jeder Eingabe-/Auswahl-/Textbereich hat einen entsprechenden <label>, wobei das for-Attribut auf die ID seines Begleiters gesetzt ist. In diesem Fall weiß ich, dass jede Eingabe nur eine einzige Bezeichnung hat.

Welches ist der beste Weg, um das zugehörige Label zu finden, wenn ein Eingabeelement in Javascript verwendet wird - beispielsweise über ein Onkeyup-Ereignis.

91
Joel Coehoorn

Scannen Sie zunächst die Seite nach Etiketten und weisen Sie dem Etikett vom eigentlichen Formularelement aus eine Referenz zu:

var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
         var elem = document.getElementById(labels[i].htmlFor);
         if (elem)
            elem.label = labels[i];         
    }
}

Dann können Sie einfach gehen:

document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';

Kein Suchfeld nötig :)

71
FlySwat

Wenn Sie jQuery verwenden, können Sie so etwas tun

$('label[for="foo"]').hide ();

Wenn Sie jQuery nicht verwenden, müssen Sie nach dem Label suchen. Hier ist eine Funktion, die das Element als Argument verwendet und die zugehörige Beschriftung zurückgibt

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}
95
TonyB

Im HTML5-Standard gibt es eine labels-Eigenschaft, die auf Labels verweist, die einem Eingabeelement zugeordnet sind.

Sie könnten so etwas verwenden (Unterstützung für native labels -Eigenschaft, aber mit einem Fallback zum Abrufen von Labels, falls der Browser dies nicht unterstützt).

var getLabelsForInputElement = function(element) {
    var labels = [];
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && Array.prototype.Push
        .apply(labels, document.querySelector("label[for='" + id + "']"));

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.Push(element);
        }  
    }

    return labels;
};

// ES6
var getLabelsForInputElement = (element) => {
    let labels;
    let id = element.id;

    if (element.labels) {
        return element.labels;
    }

    if (id) {
        labels = Array.from(document.querySelector(`label[for='${id}']`)));
    }

    while (element = element.parentNode) {
        if (element.tagName.toLowerCase() == "label") {
            labels.Push(element);
        }  
    }

    return labels;
};

Noch einfacher, wenn Sie jQuery verwenden ...

var getLabelsForInputElement = function(element) {
    var labels = $();
    var id = element.id;

    if (element.labels) {
        return element.labels;
    }

    id && (labels = $("label[for='" + id  + "']")));

    labels = labels.add($(element).parents("label"));

    return labels;
};
20
alex

Ich bin ein bisschen überrascht, dass niemand zu wissen scheint, dass Sie vollkommen erlaubt tun:

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

Welche wird von keiner der vorgeschlagenen Antworten aufgegriffen, aber wird die Eingabe korrekt bezeichnen.

Hier ist ein Code, der diesen Fall berücksichtigt:

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

Verwendungszweck:

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

Einige Notizen:

  • Der Code wurde aus Gründen der Übersichtlichkeit und nicht der Leistung geschrieben. Möglicherweise sind leistungsfähigere Alternativen verfügbar.
  • Dieser Code unterstützt das Beschreiben mehrerer Artikel auf einmal. Wenn Sie das nicht möchten, passen Sie es an.
  • Dies kümmert sich immer noch nicht um Dinge wie aria-labelledby , wenn Sie das verwenden sollten (als Übung dem Leser überlassen).
  • Die Verwendung mehrerer Labels ist eine schwierige Angelegenheit, wenn es um die Unterstützung verschiedener Benutzeragenten und unterstützender Technologien geht. Testen Sie die Tests also auf eigene Gefahr usw.
  • Ja, Sie können dies auch ohne jQuery implementieren. :-)
19
Gijs

Vorhin...

var labels = document.getElementsByTagName("LABEL"),
    lookup = {},
    i, label;

for (i = 0; i < labels.length; i++) {
    label = labels[i];
    if (document.getElementById(label.htmlFor)) {
        lookup[label.htmlFor] = label;
    }
}

Später...

var myLabel = lookup[myInput.id];

Kommentar von Snarky: Ja, das geht auch mit JQuery. :-)

13
Tomalak

mit jquery könntest du sowas machen 

var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");
7
AndreasKnudsen

document.querySelector ("label [for =" + vHtmlInputElement.id + "]");

Dies beantwortet die Frage auf die einfachste und schlankste Art. Dies verwendet Vanilla-Javascript und funktioniert in allen gängigen Mainstream-Browsern.

3
Luigi D'Amico

Wenn Sie querySelector verwenden möchten (und Sie können sogar bis zu IE9 und manchmal auch IE8!), Ist eine andere Methode realisierbar.

Wenn Ihr Formularfeld eine ID hat und Sie das for-Attribut der Beschriftung verwenden, wird dies in modernem JavaScript ziemlich einfach:

var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');

[].forEach.call(formFields, function (formField) {
    var inputId = formField.id;
    var label = form.querySelector('label[for=' + inputId + ']');
    console.log(label.textContent);
});

Einige haben über mehrere Labels berichtet; Wenn alle den gleichen Wert für das for-Attribut verwenden, verwenden Sie einfach querySelectorAll anstelle von querySelector und durchlaufen Sie alle erforderlichen Elemente.

3
Brendan
$("label[for='inputId']").text()

Dies half mir, das Label eines Eingabeelements anhand seiner ID zu ermitteln. 

2
haifacarina

Die Antwort von Gijs war für mich am wertvollsten, aber die Erweiterung funktioniert leider nicht.

Hier ist eine überarbeitete Erweiterung, die funktioniert, sie kann jemandem helfen:

jQuery.fn.getLabels = function () {
    return this.map(function () {
        var parentLabels = $(this).parents('label').get();
        var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
        return parentLabels.concat(associatedLabels);
    });
};

Es ist tatsächlich viel einfacher, dem Etikett im Formular selbst eine ID hinzuzufügen, zum Beispiel:

<label for="firstName" id="firstNameLabel">FirstName:</label>

<input type="text" id="firstName" name="firstName" class="input_Field" 
       pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
       title="Alphabetic, Space, Dash Only, 2-25 Characters Long" 
       autocomplete="on" required
/>

Dann können Sie einfach so etwas verwenden:

if (myvariableforpagelang == 'es') {
   // set field label to spanish
   document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
   // set field tooltip (title to spanish
   document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}

Das Javascript muss in einer Body-Onload-Funktion sein, um zu funktionieren.

Nur ein Gedanke, funktioniert wunderbar für mich.

1
Martie Henry

Wie bereits erwähnt, berücksichtigt die (derzeit) am besten bewertete Antwort nicht die Möglichkeit, eine Eingabe in ein Label einzubetten.

Da niemand eine JQuery-freie Antwort gepostet hat, hier meine:

var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
    var label = labels[i];
    var input = label.htmlFor
              ? document.getElementById(label.htmlFor)
              : label.getElementsByTagName('input')[0];
    input_label[input.outerHTML] = 
        (label.innerText || label.textContent); // innerText for IE8-
}

In diesem Beispiel wird die Nachschlagetabelle der Einfachheit halber direkt durch die Eingabe-HTML-Elemente indiziert. Dies ist kaum effizient und Sie können es beliebig anpassen.

Sie können ein Formular als Basiselement oder das gesamte Dokument verwenden, wenn Sie Etiketten für mehrere Formulare gleichzeitig erhalten möchten.

Es wird keine Überprüfung auf falsches HTML durchgeführt (mehrere oder fehlende Eingaben in Beschriftungen, fehlende Eingaben mit entsprechender htmlFor-ID usw.).

Sie möchten möglicherweise die Beschriftungstexte zuschneiden, da nachgestellte Leerzeichen häufig vorhanden sind, wenn die Eingabe in das Etikett eingebettet ist.

1
kuroi neko

Verwenden Sie einen JQuery-Selektor:

$("label[for="+inputElement.id+"]")
0
Mike McKay

haben Sie versucht, document.getElementbyID ('id') zu verwenden, wobei id die ID des Labels ist oder die Situation ist, in der Sie nicht wissen, nach welcher Sie suchen

0
Josh Mein

Ich weiß, das ist alt, aber ich hatte Probleme mit einigen Lösungen und stellte diese zusammen. Ich habe dies unter Windows (Chrome, Firefox und MSIE) und OS X (Chrome und Safari) getestet und glaube, dass dies die einfachste Lösung ist. Es funktioniert mit diesen drei Arten, ein Etikett anzubringen.

<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>

<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>

<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>

JQuery verwenden:

$(".c123").click(function() {
    $cb = $(this);
    $lb = $(this).parent();
    alert( $cb.attr('id') + ' = ' + $lb.text() );
});

Mein JSFiddle: http://jsfiddle.net/pnosko/6PQCw/

0
Peter Nosko

Die beste Antwort funktioniert einwandfrei, aber in den meisten Fällen ist es übertrieben und ineffizient, alle label-Elemente zu durchlaufen.

Hier ist eine effiziente Funktion, um die label zu erhalten, die zum input-Element gehört:

function getLabelForInput(id)
{
    var el = document.getElementById(id);
    if (!el)
        return null;
    var elPrev = el.previousElementSibling;
    var elNext = el.nextElementSibling;
    while (elPrev || elNext)
    {
        if (elPrev)
        {
            if (elPrev.htmlFor === id)
                return elPrev;
            elPrev = elPrev.previousElementSibling;
        }
        if (elNext)
        {
            if (elNext.htmlFor === id)
                return elNext;
            elNext = elNext.nextElementSibling;
        }
    }
    return null;
}

Für mich war diese eine Codezeile ausreichend:

el = document.getElementById(id).previousElementSibling;

In den meisten Fällen befindet sich die Variable label sehr nahe oder neben der Eingabe, was bedeutet, dass die Schleife in der obigen Funktion nur eine sehr kleine Anzahl von Malen durchlaufen muss.

0
Dan Bray

Alle anderen Antworten sind extrem veraltet !!

Alles was du tun musst, ist:

input.labels

HTML5 wird bereits seit vielen Jahren von allen großen Browsern unterstützt. Es gibt absolut keinen Grund, dass Sie dies von Grund auf selbst erstellen oder polyfill machen müssen! Verwenden Sie einfach input.labels und es löst alle Ihre Probleme.

0
dj nag

Ich habe für meinen eigenen Bedarf gemacht, kann für jemanden nützlich sein: JSFIDDLE

$("input").each(function () {
    if ($.trim($(this).prev('label').text()) != "") {
        console.log("\nprev>children:");
        console.log($.trim($(this).prev('label').text()));
    } else {
        if ($.trim($(this).parent('label').text()) != "") {
            console.log("\nparent>children:");
            console.log($.trim($(this).parent('label').text()));
        } else {
            if ($.trim($(this).parent().prev('label').text()) != "") {
                console.log("\nparent>prev>children:");
                console.log($.trim($(this).parent().prev('label').text()));
            } else {
                console.log("NOTFOUND! So set your own condition now");
            }
        }
    }
});
0
itsazzad

Ich bin etwas überrascht, dass niemand die Verwendung der CSS-Beziehungsmethode vorschlägt.

in einem Stylesheet können Sie ein Label über die Elementauswahl referenzieren:

<style>

//for input element with class 'YYY'
input.YYY + label {}

</style>

wenn das Kontrollkästchen eine ID von 'XXX' hat, würde das Label über jQuery gefunden werden:

$('#XXX + label');

Sie können auch .find ('+ label') anwenden, um das Label von einem jQuery-Checkbox-Element zurückzugeben. Dies ist nützlich, wenn Sie Folgendes ausführen:

$('input[type=checkbox]').each( function(){
   $(this).find('+ label');
});
0
Gordon Rouse

Eine wirklich prägnante Lösung mit ES6-Funktionen wie Destructuring und impliziten Renditen, um daraus einen praktischen Liner zu machen, wäre: 

const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)

Oder um einfach ein Label zu bekommen, keine NodeList: 

const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)
0

Für zukünftige Sucher ... Das Folgende ist eine jQuery-ified-Version von FlySwats akzeptierter Antwort:

var labels = $("label");
for (var i = 0; i < labels.length; i++) {
    var fieldId = labels[i].htmlFor;
    if (fieldId != "") {
        var elem = $("#" + fieldId);
        if (elem.length != 0) {
            elem.data("label", $(labels[i]));   
        }
    }
}

Mit:

$("#myFormElemId").data("label").css("border","3px solid red");
0
ObjectType