jQuery: evidenziare l'elemento label associato ad un campo

  • jQuery
  • Gabriele Romanato

jQuery ci consente di aggiungere effetti davvero particolari agli elementi dei form. In questo articolo vedremo come evidenziare l'elemento label collegato ad un determinato campo quando quest'ultimo riceve il focus. Vediamo insieme i dettagli.

Partiamo da questa marcatua d'esempio:


<form action="#" id="test" method="post">
    <div>
        <label for="name">Nome</label>
        <input type="text" name="name" id="name" />
    </div>
    <div>
        <label for="email">E-mail</label>
        <input type="text" name="email" id="email" />
    </div>
</form>

Nel CSS definiremo anche la classe usata per evidenziare l'elemento label:


form {
    margin: 2em;
}

form div {
    margin-bottom: 1em;
    overflow: hidden;
}

label {
    float: left;
    width: 4em;
    font: bold 90% Arial, sans-serif;
    margin-right: 1em;
    padding: 0.3em;
    text-align: center;
}

input {
    font: 1em Arial, sans-serif;
    width: 12em;
    border: 1px solid #999;
    padding: 3px;
    float: left;
}

.labelfocus {
    background: #ffa;
    border-radius: 6px;
    border: 1px solid #f60;
}
​

Con jQuery useremo l'ID del campo corrente per selezionare l'elemento label associato tramite un selettore di attributo. Useremo inoltre jQuery UI per aggiungere una transizione all'applicazione della classe CSS:


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

Potete visionare l'esempio finale in questa pagina.

Torna su