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
:
<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">
Para otros elementos: select
, input type=checkbox/radio
ocurre justo después de cambiar la opción seleccionada:
<select onchange="alert(this.value)">
<option value="">Select something</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Evento: input
El evento input
ocurre 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 no que involucran acciones de teclado: copiar/pegar con el mouse o usar reconocimiento de voz para dictar texto.
Por ejemplo:
<input type="text" id="input"> oninput: <span id="result"></span>
<script>
input.oninput = function() {
result.innerHTML = input.value;
};
</script>
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, e.g presionar las flechas de dirección ⇦ ⇨ mientras se está en el input.
oninput
El evento input
ocurre después de que el valor es modificado.
Por lo tanto no podemos usar event.preventDefault()
para evitar modificaciones, en este caso ya es demasiado tarde por lo que no habrí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 copiados/pegados.
También podemos usar event.preventDefault()
para cancelar la acción y que nada sea copiado/pegado.
Por ejemplo, el siguiente código evita tales eventos y muestra qué es los que estamos intentando cortar/copiar/pegar:
<input type="text" id="input">
<script>
input.oncut = input.oncopy = input.onpaste = function(event) {
alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
return false;
};
</script>
Por favor ten en cuenta que 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.
El portapapeles es algo a nivel “global” del SO. Por cuestiones de seguridad, la mayoría de los navegadores dan acceso al portapapeles solamente bajo determinadas acciones del usuario, por ejemplo al manejar eventos onclick
.
Además está prohibido generar eventos “personalizados” del portapapeles con dispatchEvent
en todos los navegadores excepto Firefox.
Resumen
Eventos de modificación de datos:
Evento | Descripción | Especiales |
---|---|---|
change |
Un valor fue cambiado. | Para ingreso de texto, ocurre al perderse el enfoque |
input |
Para entrada de texto en cada cambio | Ocurre inmediatamente a diferencia de change . |
cut/copy/paste |
Acciones cortar/copiar/pegar | La acción puede ser cancelada. La propiedad event.clipboardData brinda acceso a leer/escribir del portapeles. |
Comentarios
<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…)