Come Cambiare il Colore del Testo in Input

Vuoi rendere più interattiva l’esperienza degli utenti sul tuo sito web? Cambiare il colore del testo durante la digitazione può essere un modo divertente e utile per evidenziare determinati input o fornire feedback in tempo reale. In questo articolo, ti guideremo attraverso i passaggi per implementare questa funzionalità utilizzando CSS e JavaScript.

Come Cambiare il Colore del Testo Durante la Digitazione:

Per prima cosa, assicurati di avere un elemento input nel tuo HTML, al quale aggiungeremo l’attributo oninput per chiamare una funzione JavaScript ogni volta che viene inserito un carattere. Ecco come potrebbe apparire il codice HTML:

<input type="text" id="coloredInput" oninput="changeColor(this)">

Successivamente, definiremo i CSS per l’elemento input. Possiamo impostare il colore del testo predefinito utilizzando CSS:

#coloredInput {
  color: black; /* Colore di default */
}

Infine, implementeremo la logica JavaScript per cambiare il colore del testo in base alla lunghezza del testo inserito. Ecco il codice JavaScript:

function changeColor(input) {
  var inputValue = input.value;
  var inputLength = inputValue.length;
  
  if (inputLength > 5) {
    input.style.color = "red"; // Cambia il colore del testo a rosso se la lunghezza è maggiore di 5
  } else {
    input.style.color = "black"; // Altrimenti, torna al colore di default
  }
}