Deshabilitar pegar texto en formato HTML

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

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:

  

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

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

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

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” 

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.

 

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

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

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

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

Puedes usar jquery

Archivo HTML

  

código jquery

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

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.

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.

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.

  

de

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:

  

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

  

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

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.

Yo uso esta solución vanilla JS:

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

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

HTML:

  

Código:

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

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

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

  

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

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

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

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.

Usando jquery, puedes evitar copiar y pegar usando este

 $('.textboxClass').on('copy paste cut', function(e) { e.preventDefault(); }); 
 Hope below code will work :