Desative a colagem de texto em formato HTML


96

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.


111
Impedir que as pessoas copiem / colem seus endereços de e-mail do catálogo de endereços no navegador. Isso vai cair bem.
Quentin

28
Não posso fazer muito quando é um cliente insistindo na mudança. aproveite sua bebida :)
justinl

15
Poderia estar perfeitamente bem se ele desabilitar a colagem no campo de verificação apenas quando o e-mail NÃO foi colado no campo original. Em outras palavras, o usuário terá que colar o e-mail nos dois campos ou em nenhum deles.
GJ.

25
Se um cliente pedir isso, diga a ele o quão ruim é a ideia. É uma ótima maneira de irritar um cliente no momento em que ele provavelmente irá embora (no momento do registro). Você não quer que um relacionamento com o cliente comece com o cliente sendo alienado. Essa prática está se tornando cada vez mais comum e cada vez mais questionável à medida que mais pessoas usam gerenciadores de senhas. Consulte também: ux.stackexchange.com/q/21062/9529 e ob. xkcd: xkcd.com/970
Mark Booth

Eu encontrei essa pergunta enquanto procurava como derrotar esse "recurso" com o inspetor de elemento. Funcionou!
SVD

Respostas:


53

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.


58
Para evitar que o Firefox obedeça a essa regra estúpida, vá para about: config e altere dom.event.clipboardevents.enabled para false
lolesque

1
mesmo que não esteja incluindo o js que você escreveu, posso evitar que o usuário cole qualquer coisa apenas incluindo onpaste="return false", há algum problema se eu seguir essa abordagem
viveksinghggits

@viveksinghggits O código implementa onpasteem navegadores que ainda não o fornecem. Você diz " Eu posso evitar que o usuário cole qualquer coisa ", mas em quais navegadores você testou?
AnnanFay

Em relação à implementação, vejo duas melhorias óbvias: 1) apenas execute o código em navegadores onde onpaste ainda não seja compatível, 2) execute novamente quando o DOM for modificado - atualmente, ele não será aplicado a entradas adicionadas dinamicamente.
AnnanFay

@Rick, então você está bem com áreas de texto onde os usuários podem colar qualquer coisa nele? Porque eles esperam que pareça exatamente o mesmo em outras telas onde os dados colados são exibidos e eles esperam que pareça exatamente o mesmo quando esses dados são inseridos em um e-mail. Para mim, não quero os telefonemas e e-mails de suporte que virão com isso. Desativar a colagem em um determinado campo é uma opção e questão viável, IMHO. O problema que a maioria de nós está tendo é quando usamos "Editores de Rich Text" - essas coisas parecem substituir quaisquer comandos javascript ou jquery presentes para evitar a colagem.
McAuley

144

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


6
Concordo com sua resposta para um cenário em que os próprios usuários estão inserindo dados. No entanto, quando um usuário está inserindo um endereço de e-mail em nome de outra pessoa - por exemplo, um sistema CRM ou similar - não é viável implementar sua solução. Nesses casos, o usuário não está digitando seu próprio endereço de e-mail, portanto, é provável que o digite incorretamente. Se você permitir a colagem na caixa de confirmação de e-mail, obterá muitos dados incorretos, então não há nada de errado em impedir a colagem. Como desenvolvedor, você deve evitar usuários "burros o suficiente" para proteger os dados da empresa.
theyetiman

12
Também existe o caso comum em que o desenvolvedor que examina esta questão tem pouco ou nenhum controle sobre os requisitos do projeto no qual está trabalhando. Esta não é uma resposta à pergunta que está sendo feita aqui, então -1.
Nick,

4
Dizer não faça isso não responde à pergunta. Atualmente, tenho um requisito em que a pasta deve ser desativada.
Darian Everett,

13
se você alguma vez recebeu um requisito como esse, é seu trabalho como profissional rejeitá-lo. vocês são mais do que um par de mãos que sabem escrever códigos.
Dan Pantry

2
Mas existem razões válidas para quase tudo e não responder à pergunta de alguém porque você não acha que a razão DELES seja válida é irritante. Digamos que você tenha um questionário que está tentando implementar com respostas complexas. Desativar a colagem e forçar o aluno a digitar a resposta inteira em vez de copiar e colar faria com que ele gravasse a resposta na memória, ao passo que apenas copiar e colar provavelmente seria inútil. Há um motivo válido para fazer isso. Avise alguém que o que ele está tentando fazer não é uma boa ideia na maioria dos casos, mas dê uma resposta ... ou é melhor simplesmente não se dar ao trabalho de responder.
Halfhoot

69

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

1
Funciona bem para mim, tanques!
Gabriel Glauber,

26

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>

16

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

6
a questão é sobre como desativar a colagem. essa técnica apenas tornaria a cópia difícil e não afetaria a colagem.
bendman

10

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.


Ha, essa é uma ideia legal.
justinl

7

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.


4
Eu tenho essa implementação atualmente. O problema é que o usuário pensa que não recebeu o e-mail devido a um erro de nossa parte, porque verificou o endereço de e-mail que acha que digitou e não tem um e-mail. Além disso, o que acontece é que, quando eles tentam se registrar novamente, o nome de usuário que eles usaram agora está indisponível porque está preso com o endereço de e-mail incorreto.
justinl

Tnen talvez adicione algum fluxo de trabalho / código que execute a limpeza diária de nomes de usuário que não foram confirmados por, digamos, 2 dias.
Colin

1
Obrigado pelo comentário. Minha opinião seria que, se você tentasse criar uma conta em um site e dissesse que seu nome de usuário foi copiado, você voltaria novamente em 2 dias e tentaria novamente? Meus pensamentos provavelmente não. Ou você criou uma nova conta com um nome de usuário diferente no mesmo dia ou não se preocupou em voltar ao site porque não conseguiu descobrir como se registrar e o site era "muito complicado".
justinl

8
Para continuar o que Colin está dizendo, você pode supor que, quando alguém está tentando se registrar novamente com o mesmo nome de usuário e um endereço de e-mail diferente e não respondeu à mensagem de confirmação, provavelmente não há problema em permitir que o faça. Você pode descobrir que as pessoas acertaram o domínio no e-mail, mas digitou incorretamente o nome de usuário e pode usar isso para determinar quando alguém cometeu um erro.
Richard Lucas

1
Eu realmente gosto da ideia de permitir que os usuários se registrem novamente, mas ainda não confirmaram suas informações de conta. Acho que esta solução de design é melhor do que minha solução técnica original proposta. Ouvir de todas as outras pessoas que mudar essa funcionalidade padrão do navegador era uma má ideia era o que eu precisava ouvir para encontrar uma solução melhor.
justinl

7

Você pode usar o jquery

Arquivo HTML

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

código jquery

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

6

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

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

Este método é útil se você planeja aplicar o script a elementos de formulário adicionados dinamicamente.
Mateus

3

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

2

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.


Não clique com o botão direito ou mesmo nada de Apples, Unix ou ctrl-ins, e que tal iPhones?
Martlark

Também não sou um grande fã de desativar o campo de entrada, pois acho isso frustrante. Mas quais são as outras opções para impedir esse tipo de erro do usuário? Ou qual solução resultará no menor número de registros de usuários preenchidos incorretamente? Parece um pouco chato ter que digitar um endereço de e-mail manualmente novamente, mas se isso vai salvar clientes potenciais frustrados, eu prefiro forçar os usuários a digitar algo manualmente em um campo de entrada. Estou pensando que não é um grande inconveniente e a quantidade de frustração que isso pode salvar alguém de um simples erro pode valer a pena. Pensamentos?
justinl

2

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.


1

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.


Embora isso possa teoricamente responder à pergunta, seria preferível incluir as partes essenciais da resposta aqui e fornecer o link para referência.
Kev

yaah, vou cuidar da próxima vez em diante
vaichidrewar

1
Por que não começar agora descrevendo o que é "explicado muito bem", é assim que você consegue votos positivos e uma melhor representação :)
Kev

Que justificativa pode haver para (tentar) desligar o preenchimento automático? "Odiamos nossos usuários!" ? Se você está tentando ser inimigo do usuário, ele irá odiá-lo enquanto ainda vai vencer no final, porque controla o navegador.
Jan Hertsens

1

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.


1

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

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

Obrigado. Isso realmente funcionou como deveria.
Juergen

1

Eu uso esta solução JS vanilla:

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



0

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.


0

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


0

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.


0

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


-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>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.