Eventos change, input, cut, copy, paste en JavaScript

Entender e implementar el manejo de eventos de JavaScript es esencial para crear aplicaciones web dinámicas y fáciles de usar. Este artículo se centra en los eventos clave asociados con las entradas de formularios y las interacciones del usuario: change, input, cut, copy y paste. Al dominar estos eventos, puedes mejorar la experiencia de entrada de datos y proporcionar retroalimentación inmediata en los formularios web.

Esta página explica qué hace cada evento, exactamente cuándo se dispara, en qué se diferencian change e input, y cómo leer y controlar los datos del portapapeles — con ejemplos ejecutables para cada caso.

change vs input de un vistazo

Los dos eventos relacionados con texto son fáciles de confundir. Se diferencian en cuándo se disparan:

En resumen: input es "mientras escribes"; change es "cuando has terminado."

Uso del evento change

El evento change se activa cuando el valor de un elemento <input> o <textarea> es modificado y el elemento pierde el foco (blur) a continuación. Para un elemento <select>, checkbox o botón de radio, se dispara inmediatamente al cambiar la selección o el estado marcado, ya que estos no tienen un estado de escritura intermedio que confirmar. Este evento es ideal para realizar validaciones u otras acciones una vez que la entrada del usuario está finalizada.

Ejemplo: Monitorear cambios en un 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>

Este código muestra una alerta inmediata al usuario al seleccionar, indicando el color elegido.

Aprovechando el evento input

A diferencia del evento change, que generalmente se dispara cuando un campo de texto pierde el foco, el evento input se activa inmediatamente en cada pulsación de tecla o modificación de valor, proporcionando retroalimentación en tiempo real. Esto es especialmente útil para validar la entrada a medida que se escribe, como verificar la fortaleza de una contraseña o mostrar un contador de caracteres en vivo.

El evento input también se dispara para elementos contenteditable y para cambios que no provienen del teclado en absoluto — pegado, arrastrar y soltar, autocompletado o entrada por voz. Si necesitas inspeccionar o cancelar una edición antes de que se aplique al DOM, escucha en su lugar el evento relacionado beforeinput, cuyo event.inputType (por ejemplo "insertText" o "deleteContentBackward") indica qué tipo de edición está a punto de ocurrir.

Ejemplo: Validación dinámica de entrada

<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>

Este script actualiza el indicador de fortaleza a medida que el usuario escribe su contraseña.

Manejo de los eventos cut, copy y paste

Los eventos cut, copy y paste permiten a los desarrolladores interactuar con el portapapeles, lo cual puede ser vital para aplicaciones que requieren una gestión avanzada del portapapeles. Ten en cuenta que event.clipboardData tiene amplia compatibilidad entre navegadores, mientras que navigator.clipboard requiere un contexto seguro (HTTPS) y es compatible con todos los navegadores modernos. Para compatibilidad con navegadores más antiguos, usa event.clipboardData o el legado document.execCommand('copy').

Ejemplo: Interacción con el portapapeles

<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>

Este código proporciona funcionalidad para copiar texto con un botón, demuestra cómo interceptar y bloquear acciones del portapapeles usando event.preventDefault(), y gestiona el evento cut para mejorar la interactividad de la página web.

Leer y reescribir el contenido pegado

Una necesidad real común es no bloquear un pegado sino limpiarlo — por ejemplo, eliminar el formato o los saltos de línea antes de que el texto llegue a un campo. Llama a event.preventDefault() para detener el pegado predeterminado, lee el texto sin formato con event.clipboardData.getData('text'), transfórmalo e inserta tú mismo el valor limpio:

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') devuelve el contenido en texto plano; también puedes solicitar 'text/html' para contenido enriquecido. Dado que los manejadores de cut, copy y paste reciben un ClipboardEvent, exponen clipboardData de forma síncrona — a diferencia de la API asíncrona basada en Promesas navigator.clipboard utilizada en el botón de copia anterior.

Conclusión

Implementar eventos de JavaScript como change, input, cut, copy y paste no solo mejora la interactividad de las páginas web, sino que también proporciona retroalimentación inmediata a los usuarios y una experiencia más atractiva. Usa input cuando necesites comportamiento en vivo, mientras el usuario escribe; usa change cuando solo te importe el valor confirmado; y emplea los eventos del portapapeles cuando necesites leer, limpiar o controlar las acciones de copiar/pegar. Combínalos con criterio y tus formularios se sentirán responsivos sin abrumar a los usuarios con mensajes de validación prematuros.

Ver también

• Introducción a los eventos del navegador — cómo se añaden y despachan los eventos.
• Propiedades y métodos de formularios — lectura y escritura de valores de formulario.
• Eventos de formulario: submit — gestión del momento en que se envía un formulario.
• Enfoque: focus/blur — los cambios de foco que activan change.
• Teclado: keydown y keyup — eventos de tecla de nivel más bajo.

Práctica