Desative a colagem de texto em formato HTML

Existe uma maneira de usar o JavaScript para desativar a capacidade de colar texto em um campo de texto em um formulário HTML?

Por exemplo, eu tenho um formulário de registro simples onde o usuário é obrigado a inserir seu e-mail duas vezes. A segunda entrada de e-mail é para verificar se não há erros de digitação na primeira entrada de e-mail. No entanto, se o usuário copiar / colar seu e-mail, isso vai contra o propósito e estou tendo problemas com os usuários porque inseriram o e-mail errado e o copiaram / colaram.

Talvez minha pergunta não tenha sido clara, mas não estou tentando impedir que as pessoas copiem (ou arrastem e selecionem) texto em seus navegadores. Só quero impedi-los de colar a entrada em um campo de texto para minimizar o erro do usuário.

Talvez em vez de usar este "hack" você possa sugerir outra solução para o problema central que estou tentando resolver aqui. Eu fiz menos de meia dúzia de testes de usuário e isso já aconteceu duas vezes. Meu público não tem um alto nível de proficiência em computador.

Recentemente, tive que desabilitar relutantemente a colagem em um elemento de formulário. Para fazer isso, escrevi uma implementação cross-browser * do manipulador de eventos onpaste do Internet Explorer (e de outros). Minha solução precisava ser independente de quaisquer bibliotecas JavaScript de terceiros.

Aqui está o que eu inventei. Não desativa completamente a colagem (o usuário pode colar um único caractere por vez, por exemplo), mas atende às minhas necessidades e evita ter que lidar com códigos-chave, 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 fazer uso disso a fim de desativar a colagem:

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

* Sei que oninput não faz parte das especificações W3C DOM, mas todos os navegadores com os quais testei esse código - Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - são compatíveis com oninput ou onpaste. De todos esses navegadores, apenas o Opera não oferece suporte a onpaste, mas oferece suporte a oninput.

Nota: Isso não funcionará em um console ou outro sistema que use um teclado na tela (assumindo que o teclado na tela não envia teclas para o navegador quando cada tecla é selecionada). Se for possível que sua página / aplicativo seja usado por alguém com um teclado na tela e Opera (por exemplo: Nintendo Wii, alguns telefones celulares), não use este script a menos que você tenha testado para certificar-se do teclado na tela envia chaves para o navegador após cada seleção de chave.

Não faça isso. Não mexa no navegador do usuário. Ao copiar + colar em um campo de confirmação de e-mail, o usuário assume a responsabilidade sobre o que digitar. Se eles são burros o suficiente para copiar e colar um endereço defeituoso (aconteceu comigo), então a culpa é deles.

Se quiser ter certeza de que a confirmação do e-mail funcionou, peça ao usuário que verifique o e-mail enquanto o site aguarda ("Abra o programa de webmail em uma nova janela"). Mostre o endereço de e-mail em letras grandes ("O e-mail de confirmação foi enviado para .... cometeu um erro? Clique aqui para alterar).

Melhor ainda, se você puder, deixe o usuário ter algum tipo de acesso limitado sem confirmar. Dessa forma, eles podem fazer o login imediatamente e você aumenta suas chances de manter contato com o visitante, mesmo se o e-mail de confirmação for bloqueado por outros motivos (por exemplo, filtros de spam).

Adicione uma classe de 'disablecopypaste' às entradas em que deseja desativar a funcionalidade de copiar e colar e adicione este script jQuery

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

Acabamos de conseguir isso, podemos consegui-lo usando onpaste:"return false", graças a: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Temos várias outras opções disponíveis conforme listado abaixo.

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>

Você pode ... mas não faça.

Você não deve alterar o comportamento padrão do navegador de um usuário. É realmente ruim a usabilidade do seu aplicativo da web. Além disso, se um usuário deseja desabilitar este hack, ele pode simplesmente desabilitar o javascript em seu navegador.

Basta adicionar esses atributos à caixa de texto

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

Idéia maluca: exigir que o usuário envie um e-mail como parte do processo de inscrição. Isso obviamente seria inconveniente quando clicar em um link mailto não funciona (se eles estiverem usando webmail, por exemplo), mas eu vejo isso como uma forma de garantir simultaneamente contra erros de digitação e confirmar o endereço de e-mail.

Seria assim: Eles preenchem a maior parte do formulário, inserindo seu nome, senha e outros enfeites. Quando eles enviam, na verdade estão clicando em um link para enviar e-mail para o seu servidor. Você já salvou as outras informações deles, então a mensagem inclui apenas um token informando a qual conta se destina.

Que tal enviar um email de confirmação para o endereço de email que o usuário acabou de inserir duas vezes no qual há um link para uma URL de confirmação em seu site, então você sabe que ele recebeu a mensagem?

Qualquer pessoa que não clicar para confirmar o recebimento do e-mail pode ter inserido o endereço de e-mail incorretamente.

Não é uma solução perfeita, mas apenas algumas ideias.

Você pode usar o jquery

Arquivo HTML

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

código jquery

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

Estendendo a resposta @boycs , eu recomendaria também usar "on".

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

Se você tiver que usar 2 campos de e-mail e estiver preocupado com o fato de o usuário colar incorretamente o mesmo e-mail digitado incorretamente do campo 1 para o campo 2, então eu diria para mostrar um alerta (ou algo mais sutil) se o usuário colar algo no segundo campo de e-mail

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

dessa forma, você não desativa a colagem, apenas dá a eles um lembrete amigável para verificar se o que eles provavelmente digitaram no primeiro campo e depois colaram no segundo campo está correto.

entretanto, talvez um único campo de e-mail com preenchimento automático ativado seja tudo o que você precisa. é provável que eles tenham preenchido o e-mail corretamente antes em outro site em algum momento e o navegador sugerirá preencher o campo com esse e-mail

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

Você pode anexar um ouvinte "keydown" à caixa de entrada para detectar se as teclas Ctrl + V estão ou não sendo pressionadas e, em caso afirmativo, interromper o evento ou definir o valor da caixa de entrada para ''.

Isso não funcionaria clicando com o botão direito e colando ou colando do menu Editar do navegador, no entanto. Você pode precisar adicionar um contador de "último comprimento" ao ouvinte keydown e usar um intervalo para verificar o comprimento atual do campo para ver se ele aumentou desde o último pressionamento de tecla.

Nenhum dos dois é recomendado, no entanto. Campos de formulário com colagem desativada são extremamente frustrantes. Sou capaz de digitar meu e-mail corretamente na primeira vez, então me reservo o direito de colá-lo na segunda caixa.

Adicione uma segunda etapa ao seu processo de registro. Primeira página como de costume, mas ao recarregar, exiba uma segunda página e peça o e-mail novamente. Se for tão importante, o usuário pode cuidar disso.

de

Alguns podem sugerir o uso de Javascript para capturar as ações dos usuários, como clicar com o botão direito do mouse ou as combinações de teclas Ctrl + C / Ctrl + V e, em seguida, interromper a operação. Mas essa obviamente não é a melhor ou a mais simples solução. A solução está integrada nas próprias propriedades do campo de entrada junto com alguma captura de evento usando Javascript.

Para desativar o preenchimento automático dos navegadores, basta adicionar o atributo ao campo de entrada. Deve ser parecido com isto:

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

E se você quiser negar Copiar e Colar para esse campo, basta adicionar o evento Javascript capturando chamadas oncopy, onpaste e oncut e fazer com que elas retornem false, assim:

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

A próxima etapa é usar onselectstart para negar a seleção de conteúdo do campo de entrada do usuário, mas esteja avisado: isso só funciona para o Internet Explorer. O restante do acima funciona muito bem em todos os principais navegadores: Internet Explorer, Mozilla Firefox, Apple Safari (no sistema operacional Windows, pelo menos) e Google Chrome.

Verifique a validade do registro MX do host do e-mail fornecido. Isso pode eliminar erros à direita do sinal @.

Você pode fazer isso com uma chamada AJAX antes de enviar e / ou do lado do servidor após o formulário ser enviado.

Usando jquery, você pode evitar copiar, colar e recortar usando este

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

Eu uso esta solução JS vanilla:

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

Com Jquery você pode fazer isso com uma linha de código simples.

HTML:

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

Código:

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

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

que tal usar CSS no UIWebView? algo como

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

você também pode ler detalhes sobre copiar e colar em bloco usando CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Solução simples: basta reverter o processo de registro: em vez de exigir a confirmação no final do processo de registro, solicite a confirmação no início! Ou seja, o processo de registro começou com um formulário simples solicitando o endereço de e-mail e nada mais. Ao enviar, um e-mail com link para uma página de confirmação exclusiva para o endereço de e-mail enviado. O usuário acessa essa página, então o restante das informações para o cadastro (nome do usuário, nome completo, etc.) será solicitado.

Isso é simples, já que o site nem mesmo precisa armazenar nada antes da confirmação, o endereço de e-mail pode ser criptografado com uma chave e anexado como parte do endereço da página de confirmação.

Fiz algo semelhante a isso para http://bookmarkchamp.com - lá, eu queria detectar quando um usuário copiava algo em um campo HTML. A implementação que eu criei era verificar o campo constantemente para ver se, de repente, havia muito texto nele.

Em outras palavras: se antes milissegundo atrás não havia texto e agora há mais de 5 caracteres ... então o usuário provavelmente colou algo no campo.

Se você quiser ver isso funcionando no Bookmarkchamp (você precisa estar registrado), cole um URL no campo URL (ou arraste e solte um URL lá).

A maneira como eu resolveria o problema de confirmação de um endereço de e-mail é a seguinte:

1. Antes de passar pelo processo principal - por exemplo, registrar o usuário - primeiro peça a ele para inserir seu endereço de e-mail.
2. Gere um código exclusivo e envie-o para esse endereço de e-mail.
3. Se o usuário inserir o endereço de e-mail correto, ele obterá o código.
4. O usuário deve inserir esse código junto com seu endereço de e-mail e outras informações necessárias, para que possa concluir o registro. - Observe que se desta vez ele inserir um endereço de e-mail errado (ou código errado), por não corresponder ao código, o cadastro não será processado e o usuário será informado imediatamente.
5. Se o endereço de e-mail, o código e outras informações de registro foram inseridos corretamente, o registro está completo e o usuário pode começar a usar o sistema imediatamente. - não há necessidade de responder a qualquer outro endereço de e-mail para ativar sua conta

Para maior segurança, o código deve ter vida útil limitada e deve ser permitido apenas uma vez no processo de registro. Além disso, para evitar qualquer aplicativo malicioso do robô, é melhor acompanhar a primeira etapa com captcha ou um mecanismo semelhante.

Você pode desabilitar a opção copiar e colar do jQuery pelo script abaixo. jQuery ("input"). attr ("onpaste", "return false;");

de usar o atributo oppaste abaixo nos campos de entrada.

onpaste = "return false;"

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>