Zugehöriges Label hervorheben, wenn Eingabe im Fokus ist

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

Kommentare

asheep

# 5. März 2012

Bitte gib mir dieses Beispiel :(

Antworten

jamie paterson

# 29. März 2012

Das wird nützlich sein, ich werde eine dezente rgba-Farbe als Hintergrund bei Auswahl verwenden – danke :-)

Antworten

JohnMotyJr

# 17. März 2013

Ich habe einen Testfall damit gemacht, weil ich es auf die lange Tour gemacht habe. Stellte sich heraus, dass, wenn Sie zufällig bereits das for="" des Labels und die ID der Eingabe kennen, ein switch-case schneller ist.

$('form :input').bind({
    focus: function () {
        var id = $(this).attr('id').toString();
        var add = $("label[for='" + this.id + "']").addClass('labelfocus');
        switch (id) {
            case 'title':add;break;
            case 'description':add;break;
            case 'resource':add;break;
            case 'tag':add;break;
            case 'theme':add;break;
            case 'language':add;break;
        }
    },
    blur: function () {
        $('label').removeClass('labelfocus');
    }
});

jsPerf Benchmark Testfall (leicht modifiziert mit auslösenden Ereignissen). Ich bevorzuge jedoch diese Methode aufgrund des wenigeren Codes und der einfachen Verwendung, insbesondere wenn Sie dynamische Formulare haben.

Antworten

David Tintner

# 13. Dezember 2013

Sie können es nur mit CSS stylen, wenn Sie das Label nach der Eingabe platzieren

<input id="something-cool" type="text" />
<label for="something-cool">Something Cool</label>

input:focus + label { position: relative; top: -20px; }

Antworten

Victor Pavlov

# 9. April 2014

Hier ist ein sehr gutes Beispiel Es wurde wie ein kleines jQuery-Plugin realisiert und kann nach Belieben angepasst werden.

Antworten

Sumit Singh

# 20. August 2019

Ich möchte dieselbe Klasse auf dem Label, wenn ein Wert in der Eingabe vorhanden ist. Wie mache ich das?

Antworten

Kommentare

Antwort hinterlassen Antwort abbrechen