Deshabilitar pegar texto en un formulario HTML


96

¿Existe alguna forma de usar JavaScript para deshabilitar 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 frustra el propósito y he tenido problemas con los usuarios porque ingresaron el correo electrónico incorrecto y lo copiaron / pegaron.

Quizás no tuve clara mi pregunta, pero no estoy tratando de evitar que las personas copien (o arrastren la selección) texto en su navegador. Solo quiero evitar que peguen la entrada en un campo de texto para minimizar el error del usuario.

¿Quizás en lugar de usar este "truco", pueda sugerir otra solución al problema central de lo 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 competencia informática.


111
Impedir que las personas copien / peguen su dirección de correo electrónico de su libreta de direcciones en su navegador. Eso saldrá bien.
Quentin

28
No puedo hacer mucho cuando un cliente insiste en el cambio. disfruta tu bebida :)
justinl

15
Podría estar perfectamente bien si deshabilita el pegado en el campo de verificación solo cuando el correo electrónico NO se pegó en el campo original. En otras palabras, el usuario deberá pegar el correo electrónico en ambos campos o en ninguno.
GJ.

25
Si un cliente pregunta por esto, dígale qué mala idea es. Es una excelente manera de enojar a un cliente justo en el punto en el que es más probable que simplemente se aleje (en el momento del registro). No desea que una relación con el cliente comience con el cliente alienado. Esta práctica se está volviendo cada vez más común y cada vez más objetable a medida que más personas usan administradores de contraseñas. Consulte también: ux.stackexchange.com/q/21062/9529 y ob. xkcd: xkcd.com/970
Mark Booth

Encontré esta pregunta mientras buscaba cómo vencer esta "característica" con el inspector de elementos. ¡Funcionó!
SVD

Respuestas:


53

Recientemente tuve que deshabilitar a regañadientes el pegado en un elemento de formulario. Para hacerlo, escribí una implementación de navegador cruzado * 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 deshabilita 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 forma parte de la especificación DOM de 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 u onpaste. De todos estos navegadores, solo Opera no admite onpaste, pero sí admite oninput.

Nota: Esto no funcionará en una consola u otro sistema que use un teclado en pantalla (asumiendo que el teclado en pantalla no envía 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.


58
Para evitar que Firefox obedezca esta estúpida regla, vaya a about: config y cambie dom.event.clipboardevents.enabled a false
lolesque

1
incluso si no estoy incluyendo el js que escribió, puedo evitar que el usuario pegue cualquier cosa con solo incluirlo onpaste="return false", ¿hay algún problema si sigo ese enfoque?
viveksinghggits

@viveksinghggits El código se implementa onpasteen navegadores que aún no lo proporcionan. Dice " Puedo evitar que el usuario pegue cualquier cosa ", pero ¿en qué navegadores probó esto?
AnnanFay

En lo que respecta a la implementación, veo dos mejoras obvias: 1) solo ejecutar el código en navegadores donde onpaste aún no es compatible, 2) volver a ejecutar cuando se modifique el DOM: actualmente no se aplicará a las entradas agregadas dinámicamente.
AnnanFay

@Rick, ¿estás de acuerdo con las áreas de texto donde los usuarios pueden pegar cualquier cosa? Porque esperarán que se vea exactamente igual en otras pantallas donde se muestran los datos pegados y esperarán que se vea exactamente igual cuando esos datos se inserten en un correo electrónico. Para mí, no quiero las llamadas telefónicas y los correos electrónicos de soporte que vendrán con eso. Desactivar el pegado en un campo en particular es una opción y una pregunta viables, en mi humilde opinión. El problema que la mayoría de nosotros tenemos es cuando usamos "Editores de texto enriquecido": esas cosas parecen anular cualquier comando javascript o jquery que esté presente para evitar pegar.
McAuley

144

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 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 y gruesas ("El correo electrónico de confirmación se envió a ... ¿cometió un error? Haga clic aquí para cambiar).

Aún mejor, si puede, permita 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 otras razones (por ejemplo, filtros de spam).


6
Estoy de acuerdo con su respuesta para un escenario en el que los propios usuarios ingresan datos. Sin embargo, cuando un usuario ingresa una dirección de correo electrónico en nombre de otra persona, por ejemplo, un sistema CRM o similar, no es posible implementar su solución. En estos casos, el usuario no está ingresando su propia dirección de correo electrónico, por lo que es probable que la escriba mal. Si permite pegar en el cuadro de confirmación del correo electrónico, obtendrá muchos datos incorrectos, por lo que no hay nada de malo en evitar el pegado. Como desarrollador, debe mitigar los usuarios "lo suficientemente tontos" para proteger los datos de la empresa.
theyetiman

12
También existe el caso común en el que el desarrollador que analiza esta pregunta tiene poco o ningún control sobre los requisitos del proyecto en el que está trabajando. Esta no es una respuesta a la pregunta que se hace aquí, así que -1.
Nick

4
Decir que no lo hagas no responde la pregunta. Actualmente tengo un requisito en el que se debe desactivar el pegado.
Darian Everett

13
Si alguna vez le han dado un requisito como este, es su trabajo como profesional rechazarlo. eres más que un par de manos que pueden escribir código.
Dan Pantry

2
Pero hay razones válidas para casi cualquier cosa y no responder la pregunta de alguien porque no crees que SU razón sea válida es irritante. Supongamos que tiene una prueba que intenta implementar con respuestas complejas. Deshabilitar el pegado y obligar al alumno a escribir la respuesta completa en lugar de copiar y pegar haría que memorizara la respuesta, mientras que copiar y pegar probablemente no tendría valor. Hay una razón válida para hacer esto. Advierta a alguien que lo que está tratando de hacer no es una buena idea en la mayoría de los casos, pero dé una respuesta ... o es mejor no molestarse en responder.
Halfhoot

69

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();
    });
  });

1
¡Funciona bien para mí, tanques!
Gabriel Glauber

26

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 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>

16

Puedes ... pero no lo hagas.

No debe alterar el comportamiento predeterminado del navegador de un usuario. Realmente es una mala usabilidad para su aplicación web. Además, si un usuario quiere deshabilitar este truco, puede deshabilitar javascript en su navegador.

Simplemente agregue estos atributos al cuadro de texto

ondragstart=”return false onselectstart=”return false

6
la pregunta es sobre deshabilitar el pegado. esta técnica solo dificultaría la copia y no afectaría en absoluto al pegado.
bendman

10

Idea loca: solicite al usuario que le envíe un correo electrónico como parte del proceso de registro. Obviamente, esto sería inconveniente cuando hacer clic en un enlace mailto no funciona (si están usando correo web, 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í: completan la mayor parte del formulario, ingresando su nombre, contraseña y otras cosas. Cuando presionan enviar, 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.


Ja, esa es una buena idea.
Justinl

7

¿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 recibió el mensaje?

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

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


4
Tengo esta implementación actualmente. El problema es que el usuario piensa que no recibe el correo electrónico debido a un error de nuestra parte porque revisa su dirección de correo electrónico que cree que ingresó y no tiene correo electrónico. Además, lo que sucede es que cuando intentan volver a registrarse nuevamente, el nombre de usuario que usaron ahora no está disponible porque está bloqueado con esa dirección de correo electrónico incorrecta.
justinl

Entonces tal vez agregue algún flujo de trabajo / código que se ejecute todos los días limpiando los nombres de usuario que no se han confirmado durante, digamos, 2 días.
Colin

1
Gracias por el comentario. Mi pensamiento sería que si intentara crear una cuenta en un sitio web y dijera que su nombre de usuario fue tomado, ¿volvería en 2 días y volvería a intentarlo? Lo más probable es que mis pensamientos no lo sean. O ha creado una nueva cuenta con un nombre de usuario diferente el mismo día o no se ha molestado en volver al sitio porque no pudo averiguar cómo registrarse y el sitio era "demasiado complicado".
justinl

8
Para continuar con lo que dice Colin, posiblemente podría suponer que cuando alguien está tratando de volver a registrarse con el mismo nombre de usuario y una dirección de correo electrónico diferente y no ha respondido al mensaje de confirmación, probablemente esté bien dejar que lo haga. Puede encontrar que las personas obtienen su dominio correcto en su correo electrónico, pero escriben mal su nombre de usuario y podrían usar esto para determinar aún más cuándo alguien ha cometido un error.
Richard Lucas

1
Realmente me gusta la idea de permitir que los usuarios vuelvan a registrarse que aún no han confirmado la información de su cuenta. Creo que esta solución de diseño es mejor que mi solución técnica propuesta originalmente. Escuchar de todos los demás que cambiar esta funcionalidad predeterminada del navegador era una mala idea era lo que necesitaba escuchar para encontrar una mejor solución.
justinl

7

Puedes usar jquery

Archivo HTML

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

código jquery

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

6

Ampliando la respuesta de @boycs , recomendaría también usar "on".

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

Este método es útil si planea aplicar el script a elementos de formulario agregados dinámicamente.
Mateo

3

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 deshabilita el pegado, solo les da un recordatorio amistoso para verificar que lo que presumiblemente han escrito en el primer campo y luego pegado en el segundo campo es correcto.

sin embargo, quizás todo lo que se necesita sea un solo campo de correo electrónico con autocompletar activado. lo más probable es que hayan completado su correo electrónico correctamente antes en otro sitio en algún momento y el navegador sugerirá completar el campo con ese correo electrónico

<input type="email" name="email" required autocomplete="email">

2

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

Sin embargo, eso no manejaría hacer clic con el botón derecho y pegar o pegar desde el menú Editar del navegador. Es posible que deba agregar un contador de "última longitud" al oyente de pulsación de tecla y utilizar un intervalo para comprobar la longitud actual del campo y ver si ha aumentado desde la última pulsación de tecla.

Sin embargo, tampoco se recomienda. Los campos de formulario con pegar desactivado son extremadamente frustrantes. Soy capaz de escribir correctamente mi correo electrónico la primera vez, así que me reservo el derecho de pegarlo en el segundo cuadro.


No hacer clic con el botón derecho ni nada de Apple, Unix o ctrl-ins, y ¿qué hay de los iPhones?
Martlark

Tampoco soy un gran fanático de deshabilitar el campo de entrada, ya que me resulta frustrante. Pero, ¿cuáles son las otras opciones para detener este tipo de error de usuario? ¿O qué solución terminará con la menor cantidad de registros de usuarios completados incorrectamente? Parece un poco molesto tener que escribir una dirección de correo electrónico manualmente de nuevo, pero si eso va a salvar a los clientes potenciales frustrados, preferiría obligar a los usuarios a escribir algo manualmente en un campo de entrada. Creo que no es un gran inconveniente y la cantidad de frustración que podría salvar a alguien de un simple error podría valer la pena. Pensamientos
justinl

2

Agregue un segundo paso a su proceso de registro. Primera página como de costumbre, pero al recargar, muestra una segunda página y vuelve a preguntar el correo electrónico. Si es tan importante, el usuario puede manejarlo.


1

de

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

Para deshabilitar 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 el evento Javascript que captura llamadas oncopy, onpaste y oncut y haga que devuelvan falso, así:

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

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


Si bien esto teóricamente puede responder a la pregunta, sería preferible incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia.
Kev

yaah, me ocuparé la próxima vez en adelante
vaichidrewar

1
¿Por qué no empezar ahora describiendo lo que se "explica muy bien", así es como se obtienen votos positivos y una mejor reputación :)
Kev

¿Qué justificación puede haber para (intentar) desactivar el autocompletado? "¡Odiamos a nuestros usuarios!" ? Si estás tratando de ser el enemigo del usuario, te odiarán mientras al final ganarán, porque controlan el navegador.
Jan Hertsens

1

Verifique 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

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

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Gracias. Esto realmente funcionó como debería.
Juergen

1

Yo uso esta solución de vainilla JS:

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())



0

Solución simple: simplemente invierta el proceso de registro: en lugar de solicitar una confirmación al final del proceso de registro, solicite la confirmación al principio. Es decir, el proceso de registro comenzó con un formulario simple que solicitaba la dirección de correo electrónico y nada más. Al enviar, un correo electrónico con un enlace a una página de confirmación única para la dirección de correo electrónico enviada. El usuario accede a esa página, luego se le pedirá el resto de información para el registro (nombre de usuario, nombre completo, etc.).

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 se puede cifrar con una clave y adjuntar como parte de la dirección de la página de confirmación.


0

Hice algo similar a esto para http://bookmarkchamp.com ; allí quería detectar cuando un usuario copiaba algo en un campo HTML. La implementación que se me ocurrió fue verificar el campo constantemente para ver si en algún momento había de repente una gran cantidad 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 desea que esto funcione en Bookmarkchamp (necesita estar registrado), pegue una URL en el campo URL (o arrastre y suelte una URL allí).


0

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ídales que ingresen 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 ingresó 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 el resto de la información requerida para que pueda completar el registro. - Tenga en cuenta que si esta vez ingresan 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 ingresado correctamente, el registro está completo y el usuario puede comenzar a usar el sistema inmediatamente. - no es necesario responder a ninguna otra dirección de correo electrónico para activar su cuenta

Para 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 prevenir cualquier aplicación de robot maliciosa, es mejor acompañar el primer paso con captcha o un mecanismo similar.


0

Puede deshabilitar la opción copiar y pegar de jQuery mediante el siguiente script. jQuery ("input"). attr ("onpaste", "return false;");

de mediante el uso del atributo oppaste de abajo en los campos de entrada.

onpaste = "devolver falso;"


-1
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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.