Deshabilitar pegar texto en un formulario HTML

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

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.

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

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

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>

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”

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.

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

Puedes usar jquery

Archivo HTML

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

código jquery

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

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

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

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

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.

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.

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.

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.

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

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

Yo uso esta solución de vainilla JS:

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

Con Jquery puede 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/

¿qué pasa con el uso de CSS en UIWebView? algo como

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

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

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.

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í).

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.

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

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>