JavaScript eventi change, input, cut, copy, paste

Comprendere e implementare la gestione degli eventi JavaScript è fondamentale per creare applicazioni web dinamiche e intuitive. Questo articolo si concentra sugli eventi principali associati agli input dei form e alle interazioni dell'utente: change, input, cut, copy e paste. Padroneggiando questi eventi è possibile migliorare l'esperienza di inserimento dati e fornire feedback immediato nei moduli web.

Questa pagina illustra cosa fa ciascun evento, esattamente quando si attiva, in cosa differiscono change e input, e come leggere e controllare i dati degli appunti — con esempi eseguibili per ciascuno.

change vs input a colpo d'occhio

I due eventi legati al testo sono facilmente confondibili. Si differenziano in quando si attivano:

In breve: input è "mentre si digita"; change è "quando si ha finito."

Utilizzo dell'evento change

L'evento change si attiva quando il valore di un elemento <input> o <textarea> viene modificato e l'elemento successivamente perde il focus (blur). Per un elemento <select>, checkbox o radio button si attiva immediatamente quando la selezione o lo stato di spunta cambia, poiché questi non hanno uno stato di digitazione intermedio da confermare. Questo evento è ideale per eseguire la validazione o altre azioni dopo che l'input dell'utente è stato finalizzato.

Esempio: Monitoraggio dei cambiamenti di Select

<select id="colorSelector">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<script>
  document.getElementById('colorSelector').addEventListener('change', function(event) {
    alert('You selected ' + event.target.value);
  });
</script>

Questo codice fornisce all'utente un avviso immediato alla selezione, indicando il colore scelto.

Sfruttare l'evento input

A differenza dell'evento change, che tipicamente si attiva quando un campo di testo perde il focus, l'evento input si attiva immediatamente a ogni pressione di tasto o modifica del valore, fornendo feedback in tempo reale. Questo è particolarmente utile per validare l'input man mano che viene inserito, ad esempio controllando la forza di una password o mostrando un contatore di caratteri in tempo reale.

L'evento input si attiva anche per gli elementi contenteditable e per le modifiche che non provengono affatto dalla tastiera — incolla, drag-and-drop, compilazione automatica o input vocale. Se è necessario ispezionare o annullare una modifica prima che venga applicata al DOM, è preferibile ascoltare l'evento correlato beforeinput, il cui event.inputType (ad esempio "insertText" o "deleteContentBackward") indica il tipo di modifica che sta per avvenire.

Esempio: Validazione dinamica dell'input

<input type="password" id="passwordInput" placeholder="Enter your password">
<div id="passwordStrength"></div>
<script>
  document.getElementById('passwordInput').addEventListener('input', function(event) {
    var strength = event.target.value.length;
    var strengthMessage = 'Weak';
    if(strength > 5) strengthMessage = 'Moderate';
    if(strength > 10) strengthMessage = 'Strong';
    document.getElementById('passwordStrength').textContent = 'Strength: ' + strengthMessage;
  });
</script>

Questo script aggiorna l'indicatore di forza mentre l'utente digita la propria password.

Gestione degli eventi cut, copy e paste

Gli eventi cut, copy e paste consentono agli sviluppatori di interagire con gli appunti, il che può essere fondamentale per le applicazioni che richiedono una gestione avanzata degli appunti. Si noti che event.clipboardData è ampiamente supportato tra i browser, mentre navigator.clipboard richiede un contesto sicuro (HTTPS) ed è supportato in tutti i browser moderni. Per il supporto dei browser più vecchi, fare affidamento su event.clipboardData o sul legacy document.execCommand('copy').

Esempio: Interazione con gli appunti

<input type="text" id="clipboardInput" value="Copy this text">
<button id="copyBtn">Copy</button>
<script>
  document.getElementById('copyBtn').addEventListener('click', async function() {
    try {
      await navigator.clipboard.writeText(document.getElementById('clipboardInput').value);
      alert('Text copied!');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  });

  document.getElementById('clipboardInput').addEventListener('paste', function(event) {
    event.preventDefault();
    alert('Pasting blocked. Pasted content: ' + event.clipboardData.getData('text'));
  });

  document.getElementById('clipboardInput').addEventListener('cut', function(event) {
    event.preventDefault();
    alert('Cutting blocked. Cut content: ' + event.clipboardData.getData('text'));
  });
</script>

Questo codice fornisce la funzionalità per copiare il testo con un pulsante, dimostra come intercettare e bloccare le azioni degli appunti utilizzando event.preventDefault(), e gestisce l'evento cut per migliorare l'interattività della pagina web.

Lettura e riscrittura del contenuto incollato

Un'esigenza reale comune non è bloccare un'operazione di incolla ma pulirla — ad esempio rimuovere la formattazione o le interruzioni di riga prima che il testo finisca in un campo. Si chiama event.preventDefault() per impedire l'incolla predefinita, si legge il testo grezzo con event.clipboardData.getData('text'), lo si trasforma e si inserisce il valore pulito manualmente:

const input = document.getElementById('clean-paste');

input.addEventListener('paste', (event) => {
  event.preventDefault();
  const pasted = event.clipboardData.getData('text');
  // Collapse whitespace/newlines into single spaces
  const cleaned = pasted.replace(/\s+/g, ' ').trim();
  input.value = cleaned;
});

clipboardData.getData('text') restituisce il payload in testo semplice; è possibile richiedere anche 'text/html' per il contenuto ricco. Poiché i gestori di cut, copy e paste ricevono un ClipboardEvent, espongono clipboardData in modo sincrono — a differenza dell'API asincrona e basata su Promise navigator.clipboard utilizzata nel pulsante di copia sopra.

Conclusione

L'implementazione di eventi JavaScript come change, input, cut, copy e paste non solo migliora l'interattività delle pagine web, ma offre agli utenti un feedback immediato e un'esperienza più coinvolgente. Utilizzare input quando si necessita di un comportamento in tempo reale durante la digitazione; utilizzare change quando interessa solo il valore confermato; e usare gli eventi degli appunti quando è necessario leggere, pulire o controllare le operazioni di copia/incolla. Combinandoli con attenzione, i form risultano reattivi senza sopraffare gli utenti con messaggi di validazione prematuri.

Vedi anche

• Introduzione agli eventi del browser — come vengono aggiunti e inviati gli eventi.
• Proprietà e metodi dei form — lettura e scrittura dei valori dei form.
• Eventi dei form: submit — gestione del momento in cui un form viene inviato.
• Focus: focus/blur — i cambiamenti di focus che attivano change.
• Tastiera: keydown e keyup — eventi di tasto di livello inferiore.

Esercizio