En JavaScript, el evento paste
permite capturar cuando el usuario pega contenido en un campo de entrada o en un elemento del DOM. Este evento proporciona acceso al portapapeles, lo que facilita obtener el contenido pegado.
paste
El evento paste
se escucha en elementos como input
, textarea
, o cualquier elemento con la capacidad de recibir texto. Para obtener el contenido pegado, se utiliza el objeto ClipboardEvent
.
// Seleccionar el elemento donde se detectará el evento
const inputElement = document.querySelector('#myInput');
// Agregar el listener para el evento 'paste'
inputElement.addEventListener('paste', (event) => {
// Prevenir el comportamiento predeterminado si es necesario
event.preventDefault();
// Obtener los datos pegados desde el portapapeles
const pasteData = event.clipboardData.getData('text');
// Mostrar el contenido pegado en la consola
console.log('Contenido pegado:', pasteData);
// Insertar manualmente el contenido si se previno el comportamiento predeterminado
inputElement.value = pasteData;
});
1. Evento paste:
addEventListener
aplicado al elemento objetivo.
2. Objeto ClipboardEvent:
event.clipboardData
: Proporciona acceso al contenido del portapapeles.
getData('text')
: Obtiene el texto pegado. También puede usarse getData('text/html')
para contenido HTML.
3. Prevención del comportamiento predeterminado:
event.preventDefault()
para evitar que el navegador lo inserte automáticamente.
Si deseas capturar el evento de pegar en cualquier lugar de la página, puedes agregar el listener al objeto document
:
document.addEventListener('paste', (event) => {
const pasteData = event.clipboardData.getData('text');
console.log('Contenido pegado en cualquier parte:', pasteData);
});
Supongamos que solo deseas permitir texto sin caracteres especiales al pegar:
const inputElement = document.querySelector('#myInput');
inputElement.addEventListener('paste', (event) => {
event.preventDefault();
// Obtener el texto pegado
let pasteData = event.clipboardData.getData('text');
// Filtrar caracteres especiales
pasteData = pasteData.replace(/[^a-zA-Z0-9 ]/g, '');
// Asignar el texto filtrado al input
inputElement.value = pasteData;
console.log('Texto filtrado:', pasteData);
});
Consulta la documentación de ClipboardEvent en MDN para más detalles sobre cómo trabajar con datos del portapapeles.
Jorge García
Fullstack developer