JavaScript: evidenziare le label dei form quando i campi ricevono il focus

Short link

In JavaScript possiamo evidenziare le label dei form quando i campi ricevono il focus.

La soluzione รจ la seguente:


'use strict';

const highlightLabelOnFocus = form => {
    let elements = form.querySelectorAll('.form-control');
    Array.prototype.forEach.call(elements, element => {
        let label = element.previousElementSibling;
        element.addEventListener('focus', () => {
            label.classList.add('focus-highlight');
        }, false);
        element.addEventListener('blur', () => {
            label.classList.remove('focus-highlight');
        }, false);
    });
};

Esempio d'uso:


document.addEventListener('DOMContentLoaded', () => {
    highlightLabelOnFocus(document.querySelector('#form'));
});

Demo

JavaScript: highlight label on focus