Scribd
Cargar
74 vistas5 páginas

Eventos Change, Input, Cut, Copy, Paste

Este documento describe varios eventos relacionados con la modificación de datos, incluidos change, input, cut, copy y paste. Explica que change se dispara cuando se pierde el foco de un elemento después de un cambio, mientras que input se dispara con cada cambio. También cubre cómo cut, copy y paste dan acceso al portapapeles y se pueden cancelar para prevenir la acción.

Cargado por

Dario Martin Caceres
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
74 vistas5 páginas

Eventos Change, Input, Cut, Copy, Paste

Este documento describe varios eventos relacionados con la modificación de datos, incluidos change, input, cut, copy y paste. Explica que change se dispara cuando se pierde el foco de un elemento después de un cambio, mientras que input se dispara con cada cambio. También cubre cómo cut, copy y paste dan acceso al portapapeles y se pueden cancelar para prevenir la acción.

Cargado por

Dario Martin Caceres
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

 Comprar EPUB/PDF 

ES

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

 24 de octubre de 2022

Eventos: change, input, cut, copy, paste


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

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.

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

Un valor fue
change En ingreso de texto, se dispara cuando el elemento pierde el foco
cambiado.
Cada cambio de
input Se dispara de inmediato con cada cambio, a diferencia de change .
entrada de texto

cut/ La acción puede ser cancelada. La propiedad event.clipboardData


Acciones cortar/
copy/ brinda acceso al portapeles. Todos los navegadores excepto Firefox también
copiar/pegar
paste soportan navigator.clipboard .
 Tareas

Calculadora de depósito
importancia: 5

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

 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…)

© 2007—2024 Ilya Kantoracerca del proyecto


contáctenos

También podría gustarte