react - javascript execcommand paste

Deshabilitar pegar texto en formato HTML

Question

¿Hay alguna manera 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 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 tenido problemas para los usuarios porque ingresaron el correo electrónico equivocado y lo copiaron / pegaron.

Tal vez no tenía claro mi pregunta, pero no estoy tratando de evitar que las personas copien (o arrastren) texto en su navegador. Solo quiero evitar que peguen entradas en un campo de texto para minimizar el error del usuario.

Quizás en lugar de utilizar este "truco", ¿puede sugerir otra solución al problema central de lo que trato 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.

Answer 1

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

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

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

Answer 2

¿Qué le parece 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 usted sabe que recibió el mensaje?

Cualquier persona que no haga clic para confirmar el recibo del correo electrónico puede haber ingresado su dirección de correo electrónico incorrectamente.

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

Answer 3

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

Answer 4

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

  $(document).ready(function () {
    $(''input.disablecopypaste'').bind(''copy paste'', function (e) {
       e.preventDefault();
    });
  });

Answer 5

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

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

Answer 6

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 revisar 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 ver que esto funciona en Bookmarkchamp (debe estar registrado), pegue una URL en el campo URL (o arrastre y suelte una URL allí).

Answer 7

Idea loca: requiere que el usuario le envíe un correo electrónico como parte del proceso de suscripción. Obviamente, esto sería un inconveniente al hacer clic en un enlace de mailto no funciona (si usan webmail, por ejemplo), pero lo veo como una manera 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 demás. Cuando presionan enviar, en realidad están haciendo clic en un enlace para enviar correos a su servidor. Ya ha guardado su otra información, por lo que el mensaje solo incluye un token que indica para qué cuenta está.

Answer 8

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, por ejemplo 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 su otra información requerida, para que puedan 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 han sido ingresados ​​correctamente, el registro está completo y el usuario puede comenzar a utilizar el sistema de inmediato. - no es necesario que respondas a ninguna otra dirección de correo electrónico para activar su cuenta

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

Answer 9

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 escriben. Si son lo suficientemente tontos como para copiar y pegar una dirección defectuosa (me ha pasado a mí), entonces es su propia culpa.

Si desea asegurarse de que la confirmación del correo electrónico funciona, haga que el usuario verifique su correo electrónico mientras su sitio espera ("Abra su programa webmail en una nueva ventana"). Muestre la dirección de correo electrónico en letras grandes y gruesas ("La confirmación por la que se envió el correo electrónico ... ¿ha cometido un error? Haga clic aquí para cambiar).

Aún mejor, si puedes, deja que el usuario tenga algún tipo de acceso limitado sin confirmarlo. De esta forma, 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).

Answer 10

Puede adjuntar un oyente "clave" al cuadro de entrada para detectar si se presionan o no las teclas Ctrl + V y, si es así, detenga el evento o establezca el valor del cuadro de entrada en ''''.

Sin embargo, eso no sería suficiente para hacer clic derecho y pegar o pegar desde el menú Editar del navegador. Es posible que necesite agregar un contador de "última duración" al oyente keydown y use un intervalo para verificar la longitud actual del campo para ver si aumenta desde la última pulsación de tecla.

Ninguno de los dos es recomendado. Los campos de formulario con pegar desactivado son extremadamente frustrantes. Soy capaz de escribir correctamente mi correo electrónico la primera vez, por lo que me reservo el derecho de pegarlo en el segundo cuadro.

Answer 11

Puedes ..... pero no lo haces.

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 desactivar javascript en su navegador.

Solo agrega estos atributos al cuadro de texto

ondragstart=”return false” onselectstart=”return false”

Answer 12

Puedes usar jquery

Archivo HTML

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

código jquery

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

Answer 13

Recientemente tuve que desactivar a regañadientes pegar en un elemento de formulario. Para hacerlo, escribí una implementación cross-browser * del controlador de eventos onpass de Internet Explorer (y de 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 por completo 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 desactivar el pegado:

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

* Sé que oninput no forma 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 onpass. De todos estos navegadores, solo Opera no admite onpass, pero sí admite la 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 las 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 (p. Ej .: Nintendo Wii, algunos teléfonos móviles), no utilice este script a menos que lo haya probado para asegurarse de que el teclado en pantalla envía claves al navegador después de cada selección de tecla.

Answer 14

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 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. Una vez enviado, se enviará un correo electrónico con un enlace a una página de confirmación exclusiva de la dirección de correo electrónico enviada. El usuario va a esa página, luego se le solicitará el resto de la 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 encriptar con una clave y adjuntar como parte de la dirección de la página de confirmación.

Answer 15

Usando jquery, puedes evitar copiar y pegar usando este

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

Answer 16

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 del envío y / o del lado del servidor después de enviar el formulario.

Answer 17

Yo uso esta solución vanilla JS:

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

Answer 18

acabo de conseguir 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 detalla 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>

Answer 19

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, entonces mostraría 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 forma, no desactivas la función de pegar, solo tienes que darles un recordatorio amigable para verificar que lo que supuestamente escribieron en el primer campo y luego pegarlo en el segundo campo es correcto.

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

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

Answer 20

from

Algunos pueden sugerir usar 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 o la más simple solución. La solución está integrada en las propiedades del campo de entrada junto con la captura de eventos mediante Javascript.

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

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

Y si quiere negar Copiar y Pegar para ese campo, simplemente agregue el evento Javascript capturando llamadas 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 onselectstart para denegar la selección de contenido del campo de entrada del usuario, pero tenga cuidado: 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 Windows OS, al menos) y Google Chrome.

Answer 21

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>