El Atributo ONPASTE

El atributo onpaste se activa cuando el usuario pega contenido en un elemento editable.

El atributo onpaste se activa cuando el usuario pega contenido en un elemento editable. Es útil para:

  • Validar contenido pegado

  • Formatear texto automáticamente

  • Sanitizar entrada de datos

  • Limitar tipos de contenido

Sintaxis Básica

HTML:

<elemento onpaste="funcion(event)">

JavaScript:

elemento.addEventListener('paste', (event) => {
    // Lógica de manejo
});

Ejemplos Clave

Ejemplo 1: Validación de Texto Plano

JavaScript:

function validarPegado(event) {
    const texto = event.clipboardData.getData('text/plain');
    if(texto.includes('<')) { // Detectar HTML
        event.preventDefault();
        mostrarError();
    }
}

Ejemplo 2: Conversión a Mayúsculas

JavaScript:

event.preventDefault();
const texto = event.clipboardData.getData('text/plain');
document.execCommand('insertText', false, texto.toUpperCase());

Ejemplo 3: Filtro Numérico

JavaScript:

if(!/^d+$/.test(texto)) {
    event.preventDefault();
    mostrarError('Solo números permitidos');
}

Ejemplo 4: Sanitización de HTML

JavaScript:

const sanitizado = texto.replace(/<[^>]*>/g, ''); // Eliminar etiquetas HTML
document.execCommand('insertHTML', false, sanitizado);

Buenas Prácticas

Acceso al Portapapeles:

JavaScript:

const datos = (event.clipboardData || window.clipboardData).getData('text/plain');

Prevención de Acciones:

JavaScript:

event.preventDefault(); // Detener comportamiento predeterminado

Métodos de Inserción:

  • insertText: Para texto plano

  • insertHTML: Para contenido formateado (con precaución)

Seguridad:

// Eliminar posibles XSS
.replace(/<script.*?</script>/gi, '')

Compatibilidad

Navegador Soporte
Chrome ✅ 1+
Firefox ✅ 22+
Safari ✅ 3+
Edge ✅ 12+

Casos de Uso Avanzados

  • Editores WYSIWYG: Limpiar formato al pegar

  • Campos de código: Resaltar sintaxis automáticamente

  • Sistemas de traducción: Traducir texto al pegar

  • Inputs especializados: Formatear números telefónicos

Conclusión

El atributo onpaste permite:

  • Mejorar la seguridad de las entradas

  • Mantener consistencia en los datos

  • Implementar funcionalidades avanzadas

  • Mejorar la experiencia del usuario

Consejos finales:

  • Siempre validar en el servidor también

  • Usar execCommand para manipulación precisa

  • Probar en diferentes navegadores

  • Considerar accesibilidad (mensajes claros)

HTML:

<!-- Ejemplo Final: Pegado inteligente en tablas -->
<table contenteditable onpaste="manejarPegadoTabla(event)">
    <!-- Filas y celdas -->
</table>

<script>
function manejarPegadoTabla(event) {
    event.preventDefault();
    const texto = event.clipboardData.getData('text/plain');
    const filas = texto.split('
').map(fila => fila.split('	'));
    // Lógica para insertar en tabla
}
</script>

Este tutorial te proporciona las bases para controlar eficientemente el pegado de contenido en tus aplicaciones web. ¡Experimenta y crea entradas más seguras y funcionales!

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo onpaste</title>
    <style>
        .demo-container {
            border: 2px solid #3498db;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
        }
        .input-control {
            margin: 10px 0;
            padding: 8px;
            width: 300px;
        }
        .error-message {
            color: #e74c3c;
            display: none;
        }
        #richEditor {
            border: 1px solid #7f8c8d;
            padding: 15px;
            min-height: 100px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Tutorial del atributo <code>onpaste</code></h1>

    <!-- Ejemplo 1: Validación básica -->
    <div class="demo-container">
        <h2>1. Validación de texto pegado</h2>
        <input type="text" class="input-control" 
               onpaste="validarPegado(event)"
               placeholder="Pega solo texto aquí">
        <p class="error-message" id="error1">¡Solo se permite texto sin formato!</p>
    </div>

    <!-- Ejemplo 2: Formateo automático -->
    <div class="demo-container">
        <h2>2. Formateo de mayúsculas</h2>
        <input type="text" class="input-control" 
               onpaste="formatearMayusculas(event)"
               placeholder="El texto se convertirá a mayúsculas">
    </div>

    <!-- Ejemplo 3: Filtro numérico -->
    <div class="demo-container">
        <h2>3. Campo numérico</h2>
        <input type="text" class="input-control" 
               onpaste="filtrarNumeros(event)"
               placeholder="Solo números permitidos">
        <p class="error-message" id="error2">¡Solo se permiten números!</p>
    </div>

    <!-- Ejemplo 4: Editor enriquecido -->
    <div class="demo-container">
        <h2>4. Control de contenido pegado</h2>
        <div id="richEditor" contenteditable="true"
             onpaste="sanitizarPegado(event)"></div>
        <p class="error-message" id="error3">¡Contenido no permitido detectado!</p>
    </div>

    <script>
        // Ejemplo 1: Validación de texto plano
        function validarPegado(event) {
            const textoPegado = (event.clipboardData || window.clipboardData)
                .getData('text/plain');
            
            if(textoPegado.match(/<[^>]*>/) || textoPegado.includes('
')) {
                event.preventDefault();
                document.getElementById('error1').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('error1').style.display = 'none';
                }, 2000);
            }
        }

        // Ejemplo 2: Convertir a mayúsculas
        function formatearMayusculas(event) {
            event.preventDefault();
            const texto = event.clipboardData.getData('text/plain');
            const textoFormateado = texto.toUpperCase();
            document.execCommand('insertText', false, textoFormateado);
        }

        // Ejemplo 3: Filtro numérico
        function filtrarNumeros(event) {
            const texto = event.clipboardData.getData('text/plain');
            if(!/^d+$/.test(texto)) {
                event.preventDefault();
                document.getElementById('error2').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('error2').style.display = 'none';
                }, 1500);
            }
        }

        // Ejemplo 4: Sanitización de contenido
        function sanitizarPegado(event) {
            event.preventDefault();
            const texto = event.clipboardData.getData('text/plain');
            const sanitizado = texto
                .replace(/<script.*?</script>/gi, '')
                .replace(/<style.*?</style>/gi, '')
                .replace(/</?[^>]+(>|$)/g, '')
                .substring(0, 500); // Limitar longitud
            
            if(texto.length !== sanitizado.length) {
                document.getElementById('error3').style.display = 'block';
                setTimeout(() => {
                    document.getElementById('error3').style.display = 'none';
                }, 2000);
            }
            
            document.execCommand('insertHTML', false, sanitizado);
        }
    </script>
</body>
</html>