Deshabilitar pegar texto en el formulario HTML


¿Hay alguna manera de usar JavaScript para deshabilitar la capacidad de pegar texto en un campo de texto en un formulario HTML?

P. Ej. Tengo un formulario de registro simple donde se requiere que el usuario ingrese 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 frustra el propósito y he estado experimentando usuarios que tienen problemas porque han introducido el correo electrónico incorrecto y lo copian/pegan.

Tal vez yo no estaba claro en mi pregunta, pero no estoy tratando de evitar que la gente copie (o arrastre la selección) el texto en su navegador. Solo quiero evitar que pegue entrada en un campo de texto para minimizar el error del usuario.

Tal vez en lugar de usar este "truco" se puede sugerir otra solución al problema central de lo que estoy tratando de resolver aquí? He hecho menos de media docena de pruebas de usuario y esto ya ha sucedido dos veces. Mi audiencia no tiene un alto nivel de computadora competencia.

Author: Michał Perłakowski, 2009-08-04

22 answers

Recientemente tuve que desactivar a regañadientes pegar en un elemento de formulario. Para hacerlo, escribí un cross-browser * implementación de Internet Explorer (y otros) onpaste controlador de eventos. Mi solución tenía que ser independiente de cualquier librería 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, 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 con el fin de desactivar el pegado:

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

* Sé que oninput no es parte de la especificación DOM W3C, pero todos los navegadores que he probado este código con-Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7-soporte oninput o onpaste. De todos estos navegadores, solo Opera no soporta onpaste, pero sí soporta oninput.

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 las teclas al navegador cuando se selecciona cada clave). Si es posible que tu 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 uses este script a menos que hayas probado para asegurarte de que el teclado en pantalla envía las teclas al navegador después de cada selección de teclas.

 52
Author: Christopher Parker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 20:55:05

No lo hagas. No te metas con el navegador del usuario. Al Copiar + 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 + pegar una dirección defectuosa (me ha pasado a mí), entonces es su propia maldita culpa.

Si desea asegurarse de que la confirmación de correo electrónico funciona, haga que el usuario revise su Correo electrónico mientras su sitio espera ("Abra su programa de correo web en una nueva ventana"). Mostrar la dirección de correo electrónico en big fat cartas ("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 mejorar sus posibilidades de mantenerse en contacto con el visitante, incluso si el correo de confirmación está bloqueado debido a otras razones (por ejemplo, filtros de spam).

 107
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-06 05:41:00

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

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });
 62
Author: Boycs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-10 01:17:20

Puedes..... pero no lo hagas.

No debe alterar el comportamiento predeterminado de un navegador de usuarios. Realmente es mala usabilidad para su aplicación web. También si un usuario quiere desactivar este hack, entonces solo puede desactivar javascript en su navegador.

Simplemente agregue estos atributos al cuadro de texto

ondragstart=”return false” onselectstart=”return false”
 15
Author: Sheff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-04 10:00:54

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

Tenemos varias otras opciones disponibles como 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>
 14
Author: Kailas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-12 10:01:52

Idea loca: Requiere que el usuario te envíe un correo electrónico como parte del proceso de registro. Esto obviamente sería inconveniente cuando hacer clic en un enlace de mailto no funciona (si están usando webmail, por ejemplo), pero lo veo como una forma de garantizar simultáneamente contra errores tipográficos y confirmar la dirección de correo electrónico.

Sería así: rellenan la mayor parte del formulario, ingresando su nombre, contraseña y demás. Cuando envían push, en realidad están haciendo clic en un enlace para enviar correo a su servidor. Ya ha guardado su otra información, por lo que el mensaje solo incluye un token que dice para qué cuenta es esto.

 9
Author: Josh Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-11-12 21:02:21

¿Qué tal enviar un correo electrónico de confirmación a la dirección de correo electrónico que el usuario acaba de ingresar dos veces en la que hay un enlace a una URL de confirmación en su sitio, entonces sabe que han recibido el mensaje?

Cualquier persona que no haga clic para confirmar la recepción del correo electrónico puede haber introducido su dirección de correo electrónico incorrectamente.

No es una solución perfecta, sino solo algunas ideas.

 7
Author: Richard Lucas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-04 10:20:41

Extendiendo @boycs respuesta, yo recomendaría también usar "on".

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });
 5
Author: e3matheus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:42

Puede usar jquery

Archivo HTML

<input id="email" name="email">

Jquery code

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });
 5
Author: Sunil Garg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-03 19:37:54

Puede adjuntar un oyente "keydown" al cuadro de entrada para detectar si se están presionando o no las teclas Ctrl + V y, si es así, detener el evento o establecer el valor del cuadro de entrada en ".

Eso no manejaría hacer clic derecho y pegar o pegar desde el menú Editar del navegador, sin embargo. Es posible que deba agregar un contador de "última longitud" al oyente keydown y usar un intervalo para verificar la longitud actual del campo para ver si aumenta desde la última pulsación de tecla.

Tampoco lo es recomendado, sin embargo. Los campos de formulario con pegado desactivado son extremadamente frustrantes. Soy capaz de escribir mi correo electrónico correctamente la primera vez, así que me reservo el derecho de pegarlo en el segundo cuadro.

 2
Author: Kevin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-04 10:09:54

Añade un segundo paso a tu proceso de registro. Primera página como de costumbre, pero al recargar, mostrar una segunda página y preguntar al correo electrónico de nuevo. Si es tan importante, el usuario puede manejarlo.

 2
Author: Alsciende,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-04 13:21:59

Si tiene que usar 2 campos de correo electrónico y le preocupa que el usuario pegue incorrectamente el mismo correo electrónico mal escrito del campo 1 al campo 2, diría que muestre una alerta (o algo más sutil) si el usuario pega algo en el segundo campo de correo electrónico

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

De esta manera no deshabilitas pegar, solo les das un recordatorio amigable para verificar que lo que presumiblemente han escrito en el primer campo y luego pegado en el segundo campo es correcto.

Sin embargo, tal vez un solo campo de correo electrónico con autocompletar activado es todo lo que se necesita. es probable que hayan llenado su correo electrónico correctamente antes en otro sitio en algún momento y el navegador sugerirá que llene el campo con ese correo electrónico

<input type="email" name="email" required autocomplete="email">
 2
Author: shunryu111,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-24 08:24:50

De

Algunos pueden sugerir el uso de Javascript para capturar las acciones de los usuarios, como hacer clic con el botón derecho del ratón o las combinaciones de teclas Ctrl+C / Ctrl+V y luego detener la operación. Pero esto obviamente no es la mejor o la solución más simple. La solución está integrada en las propiedades del campo de entrada junto con alguna captura de eventos usando Javascript.

Para desactivar el autocompletado de los navegadores, simplemente agregue el atributo al campo de entrada. Debería verse algo como esto:

<input type="text" autocomplete="off">

Y si desea denegar Copiar y Pegar para ese campo, simplemente agregue las llamadas de captura de eventos Javascript oncopy, onpaste y oncut y haga que devuelvan false, así:

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

El siguiente paso es usar onelectstart para denegar la selección de contenido del campo de entrada del usuario, pero tenga en cuenta: esto solo funciona para Internet Explorer. El resto de lo anterior funciona muy bien en todos los principales navegadores: Internet Explorer, Mozilla Firefox, Apple Safari (en el sistema operativo Windows, al menos) y Google Chrome.

 1
Author: vaichidrewar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-06 15:31:44

Compruebe la validez del registro MX del host del correo electrónico dado. Esto puede eliminar errores a la derecha del signo@.

Puede hacer esto con una llamada AJAX antes de enviar y/o del lado del servidor después de enviar el formulario.

 1
Author: max,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-06 22:28:33

Uso esta solución JS de vainilla:

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())
 1
Author: Damjan Pavlica,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-31 14:11:14

Con Jquery puedes hacer esto con una simple línea de código.

HTML:

<input id="email" name="email">

Código:

$(email).on('paste', false);

JSfiddle: https://jsfiddle.net/ZjR9P/2 /

 1
Author: Julius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-09 21:05:30

¿Qué hay de usar CSS en UIWebView? algo así como

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

También puede leer los detalles sobre copiar y pegar bloques usando CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

 0
Author: user275790,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-18 05:39:32

Solución simple: simplemente invierta el proceso de registro: en lugar de requerir confirmación al final del proceso de registro, ¡solicite confirmación al comienzo del mismo! Es decir, el proceso de registro comenzó con un simple formulario pidiendo dirección de correo electrónico y nada más. Al enviar, un correo electrónico con enlace a una página de confirmación única para la dirección de correo electrónico enviada. El usuario va a esa página, luego el resto de la información para el registro(nombre de usuario, nombre completo, etc.) será solicitar.

Esto es simple ya que el sitio web ni siquiera necesita almacenar nada antes de la confirmación, la dirección de correo electrónico puede cifrarse con una clave y adjuntarse como parte de la dirección de la página de confirmación.

 0
Author: S P Arif Sahari Wibowo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-27 20:14:25

Hice algo similar a esto para http://bookmarkchamp.com - allí quería detectar cuando un usuario copió algo en un campo HTML. La implementación que se me ocurrió fue revisar el campo constantemente para ver si en algún momento había de repente un montón de texto allí.

En otras palabras: si una vez hace milisegundos no había texto, y ahora hay más de 5 caracteres... entonces el usuario probablemente pegó algo en el campo.

Si quieres que esto funcione en Bookmarkchamp (necesita estar registrado), pegue una URL en el campo URL (o arrastre y suelte una URL allí).

 0
Author: Ivan Maeder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-17 12:31:06

La forma en que resolvería el problema de confirmar una dirección de correo electrónico es la siguiente:

  1. Antes de pasar por el proceso principal - digamos registrar al usuario - primero pídale que ingrese su dirección de correo electrónico.
  2. Genere un código único y envíelo a esa dirección de correo electrónico.
  3. Si el usuario ha introducido la dirección de correo electrónico correcta, obtendrá el código.
  4. El usuario debe ingresar ese código junto con su dirección de correo electrónico y su otra información requerida, para que pueda completar registro. - Tenga en cuenta que si esta vez ingresa una dirección de correo electrónico incorrecta (o un código incorrecto), porque no coincidirá con el código, el registro no se realizará y el usuario será informado de inmediato.
  5. Si la dirección de correo electrónico, el código y otra información de registro se han introducido correctamente, el registro se ha completado y el usuario puede comenzar a utilizar el sistema inmediatamente. - no es necesario responder a ninguna otra dirección de correo electrónico con el fin de activar su cuenta

Para una mayor seguridad, el código debe tener una vida útil limitada, y solo debe permitirse una vez en el proceso de registro. Además, para evitar cualquier aplicación de robots maliciosos, es mejor acompañar el primer paso con captcha o un mecanismo similar.

 0
Author: Majix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-15 03:39:39

Usando jquery, puede evitar copiar, pegar y cortar usando este

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});
 0
Author: Krishna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-17 19:30:03
Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
 -1
Author: Jignesh Vachhani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-30 10:22:47