Deshabilitar pegar texto en formulario HTML

Resuelto justinl asked hace 15 años • 25 respuestas

¿Existe alguna forma de utilizar JavaScript para desactivar la capacidad de pegar texto en un campo de texto en un formulario HTML?

Por ejemplo, tengo un formulario de registro simple en el que el usuario debe ingresar su correo electrónico dos veces. La segunda entrada de correo electrónico es para verificar que no haya errores tipográficos en la primera entrada de correo electrónico. Sin embargo, si el usuario copia/pega su correo electrónico, eso anula el propósito y he experimentado que los usuarios tienen problemas porque ingresaron el correo electrónico incorrecto y lo copiaron/pegaron.

Tal vez no fui clara en mi pregunta, pero no estoy tratando de evitar que las personas copien (o arrastren y seleccionen) texto en su navegador. Solo quiero evitar que peguen datos en un campo de texto para minimizar el error del usuario.

¿Quizás en lugar de utilizar este "truco", puedas sugerir otra solución al problema central que estoy tratando de resolver aquí? He realizado menos de media docena de pruebas de usuario y esto ya ha sucedido dos veces. Mi audiencia no tiene un alto nivel de dominio de la informática.

justinl avatar Aug 04 '09 16:08 justinl
Aceptado

No lo hagas. No te metas con el navegador del usuario. Al copiar y pegar en un campo de confirmación de correo electrónico, el usuario acepta la responsabilidad sobre lo que escribe. Si son lo suficientemente tontos como para copiar y pegar una dirección defectuosa (me ha pasado a mí), entonces es su maldita culpa.

Si desea asegurarse de que la confirmación del correo electrónico funcione, haga que el usuario revise su correo electrónico mientras su sitio espera ("Abra su programa de correo web en una ventana nueva"). Muestre la dirección de correo electrónico en letras grandes ("El correo electrónico de confirmación fue enviado a.... ¿cometió un error? Haga clic aquí para cambiar).

Aún mejor, si puedes, deja que el usuario tenga algún tipo de acceso limitado sin confirmar. De esa manera, pueden iniciar sesión de inmediato y usted mejora sus posibilidades de mantenerse en contacto con el visitante incluso si el correo de confirmación está bloqueado por otros motivos (por ejemplo, filtros de spam).

Pekka avatar Nov 12 '2009 21:11 Pekka

Agregue una clase de 'disablecopypaste' a las entradas en las que desea deshabilitar la funcionalidad de copiar y pegar y agregue este script jQuery

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });
Boycs avatar Jan 10 '2012 01:01 Boycs

Recientemente tuve que deshabilitar a regañadientes el pegado en un elemento de formulario. Para hacerlo, escribí una implementación para varios navegadores* del controlador de eventos onpaste de Internet Explorer (y otros). Mi solución tenía que ser independiente de las bibliotecas de JavaScript de terceros.

Esto es lo que se me ocurrió. No desactiva completamente el pegado (el usuario puede pegar un solo carácter a la vez, por ejemplo), pero satisface mis necesidades y evita tener que lidiar con códigos clave, etc.

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

Para hacer uso de esto para deshabilitar el pegado:

<input type="text" onpaste="return false;" />

* Sé que oninput no es parte de la especificación DOM del W3C, pero todos los navegadores con los que he probado este código (Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7) admiten oninput o onpaste. De todos estos navegadores, sólo Opera no admite pegar, pero sí admite entrada.

Nota: Esto no funcionará en una consola u otro sistema que use un teclado en pantalla (suponiendo que el teclado en pantalla no envíe teclas al navegador cuando se selecciona cada tecla). Si es posible que su página/aplicación pueda ser utilizada por alguien con un teclado en pantalla y Opera (por ejemplo: Nintendo Wii, algunos teléfonos móviles), no use este script a menos que haya probado para asegurarse de que el teclado en pantalla envía claves al navegador después de cada selección de clave.

Christopher Parker avatar Nov 12 '2009 17:11 Christopher Parker

Acabo de recibir esto, podemos lograrlo usando onpaste:"return false", gracias a: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Tenemos varias otras opciones disponibles que se enumeran a continuación.

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>
Kailas avatar Oct 08 '2014 11:10 Kailas