25/3/24, 00:25 Eventos: change, input, cut, copy, paste

 Comprar EPUB/PDF 
ES

 → El navegador: Documentos, Eventos e Interfaces → Formularios y controles

 24 de octubre de 2022

Eventos: change, input, cut, copy, paste

Veamos varios eventos que acompañan la actualización de datos.

Evento: change
El evento change se activa cuando el elemento finaliza un cambio.

Para ingreso de texto significa que el evento ocurre cuando se pierde foco en el elemento.

Por ejemplo, mientras estamos escribiendo en el siguiente cuadro de texto, no hay evento. Pero cuando movemos el focus
(enfoque) a otro lado, por ejemplo hacemos click en un botón, entonces ocurre el evento change :

 
1 <input type="text" onchange="alert(this.value)">
2 <input type="button" value="Button">

Button

Para otros elementos: select , input type=checkbox/radio se dispara inmediatamente después de cambiar la opción
seleccionada:

 
1 <select onchange="alert(this.value)">
2 <option value="">Select something</option>
3 <option value="1">Option 1</option>
4 <option value="2">Option 2</option>
5 <option value="3">Option 3</option>
6 </select>

Select something

Evento: input
El evento input se dispara cada vez que un valor es modificado por el usuario.

A diferencia de los eventos de teclado, ocurre con el cambio a cualquier valor, incluso aquellos que no involucran acciones de
teclado: copiar/pegar con el mouse o usar reconocimiento de voz para dictar texto.

Por ejemplo:

 
1 <input type="text" id="input"> oninput: <span id="result"></span>
2 <script>
3 input.oninput = function() {
4 result.innerHTML = input.value;
5 };
6 </script>

oninput:

Si queremos manejar cualquier modificación en un <input> entonces este evento es la mejor opción.

Por otro lado, el evento input no se activa con entradas del teclado u otras acciones que no involucren modificar un valor, por
ejemplo presionar las flechas de dirección ⇦ ⇨ mientras se está en el input.

 No podemos prevenir nada en oninput

El evento input se dispara después de que el valor es modificado.

Por lo tanto no podemos usar event.preventDefault() aquí, es demasiado tarde y no tendría efecto.

Eventos: cut, copy, paste

Estos eventos ocurren al cortar/copiar/pegar un valor.

Estos pertenecen a la clase ClipboardEvent y dan acceso a los datos cortados/copiados/pegados.

https://es.javascript.info/events-change-input 1/4
25/3/24, 00:25 Eventos: change, input, cut, copy, paste
También podemos usar event.preventDefault() para cancelar la acción y que nada sea cortado/copiado/pegado.

El siguiente código también evita todo evento cut/copy/paste y muestra qué es los que estamos intentando
cortar/copiar/pegar:

 
1 <input type="text" id="input">
2 <script>
3 input.onpaste = function(event) {
4 alert("paste: " + event.clipboardData.getData('text/plain'));
5 event.preventDefault();
6 };
7
8 input.oncut = input.oncopy = function(event) {
9 alert(event.type + '-' + document.getSelection());
10 event.preventDefault();
11 };
12 </script>

Nota que dentro de los manejadores cut y copy , llamar a event.clipboardData.getData(...) devuelve un string
vacío. Esto es porque el dato no está en el portapapeles aún. Y si usamos event.preventDefault() no será copiado en
absoluto.

Por ello el ejemplo arriba usa document.getSelection() para obtener el texto seleccionado. Puedes encontrar más
detalles acerca de selección en el artículo Selection y Range.

No solo es posible copiar/pegar texto, sino cualquier cosa. Por ejemplo, podemos copiar un archivo en el gestor de archivos del
SO y pegarlo.

Esto es porque clipboardData implementa la interfaz DataTransfer , usada comúnmente para “arrastrar y soltar” y
“copiar y pegar”. Ahora esto está fuera de nuestro objetivo, pero puedes encontrar sus métodos en la especificación
DataTransfer.

Hay además una API asincrónica adicional para acceso al portapapeles: navigator.clipboard . Más en la especificación
Clipboard API and events, no soportado en Firefox.

Restricciones de seguridad

El portapapeles es algo a nivel “global” del SO. Un usuario puede alternar entre ventanas, copiar y pegar diferentes cosas, y el
navegador no debería ver todo eso.

Por ello la mayoría de los navegadores dan acceso al portapapeles únicamente bajo determinadas acciones del usuario, como
copiar y pegar.

Está prohibido generar eventos “personalizados” del portapapeles con dispatchEvent en todos los navegadores excepto
Firefox. Incluso si logramos enviar tal evento, la especificación establece que tal evento “sintético” no debe brindar acceso al
portapapeles.

Incluso si alguien decide guardar event.clipboardData en un manejador de evento para accederlo luego, esto no
funcionará.

Para reiterar, event.clipboardData funciona únicamente en el contexto de manejadores de eventos iniciados por el usuario.

Por otro lado, navigator.clipboard es una API más reciente, pensada para el uso en cualquier contexto. Esta pide autorización al
usuario cuando la necesita.

Resumen
Eventos de modificación de datos:

Evento Descripción Especiales

change Un valor fue cambiado. En ingreso de texto, se dispara cuando el elemento pierde el foco
Cada cambio de
input Se dispara de inmediato con cada cambio, a diferencia de change .
entrada de texto
La acción puede ser cancelada. La propiedad event.clipboardData brinda
Acciones
cut/copy/paste acceso al portapeles. Todos los navegadores excepto Firefox también soportan
cortar/copiar/pegar
navigator.clipboard .

 Tareas

Calculadora de depósito 

importancia: 5

https://es.javascript.info/events-change-input 2/4
25/3/24, 00:25 Eventos: change, input, cut, copy, paste
Crea una interfaz que permita ingresar una suma de depósito bancario y porcentaje, luego calcula cuánto será después de un
periodo de tiempo determinado.

Acá una demostración:

Calculadora de depósito.
Depósito inicial 10000
¿Cuántos meses? 12 (un año)
¿Interés anual? 5
Inicial: Final:
10000 10500

Cualquier modificación debe ser procesada de inmediato.

La fórmula es:

1 // initial: la suma inicial de dinero

2 // interest: e.g. 0.05 significa 5% anual
3 // years: cuántos años esperar
4 let result = Math.round(initial * (1 + interest) ** years);

Abrir un entorno controlado para la tarea.

solución


Abrir la solución en un entorno controlado.

 Lección anterior Próxima lección


Compartir  Mapa del Tutorial

 Comentarios
● Si tiene sugerencias sobre qué mejorar, por favor enviar una propuesta de GitHub o una solicitud de extracción en
lugar de comentar.
● Si no puede entender algo en el artículo, por favor explique.
● Para insertar algunas palabras de código, use la etiqueta <code> , para varias líneas – envolverlas en la etiqueta
<pre> , para más de 10 líneas – utilice una entorno controlado (sandbox) (plnkr, jsbin, codepen…)

https://es.javascript.info/events-change-input 3/4
25/3/24, 00:25 Eventos: change, input, cut, copy, paste

1 Comentario 1 Acceder


G Únete a la conversación...

INICIAR SESIÓN CON O REGISTRARSE CON DISQUS ?

Nombre

 1 Mejores Más recientes Más antiguos

Foxy Lady − ⚑
hace un año

Hola, yo tengo un input de tipo range y quiero que cuando se mueva esa barra cambie un número (precio) que
aparece en otra parte. ¿Debería usar el evento change?
Gracias.

0 0 Responder

Política de Privacidad No vendan mis datos

© 2007—2024 Ilya Kantoracerca del proyecto

contáctenos

https://es.javascript.info/events-change-input 4/4