ASP .NET - Evitando o Copiar/Colar em controles TextBox em formulários Web

Este artigo mostra como você pode desabilitar o recurso de copiar e colar textos em caixas de texto em formulários Web usando o JQuery.

Se você não conhece o JQuery sugiro que leia o meu artigo: ASP .NET - Apresentando JQuery

Eu estou usando o Visual Studio 2010 Professional Edition (cópia de avaliação).

Abra o VS 2010 e no menu File clique em New Web Site;

A seguir selecione o template ASP .NET Web SIte, informe o nome EvitarCopiarColar usando a linguagem Visual Basic e clique em OK;

Na janela Solution Explorer você verá o projeto para web site criado:

- Observe que já foi incluída a library do JQuery na pasta Scripts.
- A versão atual do JQuery é a 1.4.2 mas a versão 1.3.2 também funciona para o nosso exemplo.

Obs: Você pode também efetuar o download da biblioteca JQuery e copiá-la no seu projeto.

Feito isso vamos criar na página Default.aspx um formulário para cadastro de Clientes incluindo uma tabela com 5 linhas e 2 colunas e os controles TextBox conforme o leiaute abaixo:

Nesta página temos um formulário simples que pretende simular um formulário de cadastro muito como na web.

Antes de podermos usar os recursos do JQuery temos que incluir a library do JQuery no projeto e fazermos isso incluindo o elemento <script> à seção <head> da página Default.aspx referenciado o arquivo de script JQuery que se encontra na pasta Scripts do projeto:

<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js") %>'></script>

Uma outra forma de obter o mesmo resultado é referenciar diretamente o arquivo JQuery a partir do Google's CDN or Microsoft's CDN. Usando esse esquema a declaração ficaria assim:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Agora estamos pronto para usar os recursos do JQuery em nossa aplicação ASP .NET.

Desabilitando o recurso de copiar e colar texto nos controles TextBox

Nossa primeira tarefa é desabilitar os recursos de CTRL+C e CTRL+V , o famoso Copiar/Colar na nossa página web. Dessa forma não será mais possível copiar textos de e para os controles TextBox do formulário.

Selecione a página Defatul.aspx e no mode Design inclua o código abaixo na seção <head> da página:

   <script type="text/javascript">
           $(document).ready(function () {
               $('input[type=text]').bind('copy paste', function (e) {
                   e.preventDefault();
               });
           });
    </script>

Este código cria um manipulador de evento para os eventos copy e paste para todas as caixas de texto na página.

O manipulador de eventos chama a função preventDefault que cancela o comportamento do evento padrão, e dessa forma impede a copia ou a colagem de texto nos controles.

- $(document).ready define uma função que executa quando a página for carregada;
- $('input[type=text]') é um selecto JQuery (um selector referencia um ou mais elementos na página) que referencia todos os elementos <input> que têm o seu atributo igual a "text";
- bind('copy paste', function(e) { ... }) - cria um manipulador de eventos para os eventos copy e paste em cada um dos elementos retornados pelo selector.
- Quando o evento dispara o código definido em function(e) { ... } é executado, no caso haverá a chamada da função prevendDefault que cancela o copy e paste;

Executando o projeto a página Default.aspx será carrega e se você tentar copiar ou colar texto em um controle TextBox simplesmente não vai conseguir.

Desabilitando o recurso de copiar texto em um TextBox específico

Vamos agora ser um pouco mais específicos, vamos desabilitar apenas o recurso de colar texto e isso em um TextBox específico.

Um caso muito comum de aplicação deste recurso é em formulários onde se pede a confirmação de E-mail, senha ou qualquer outra informação. Podemos impedir que o cliente cole os dados do outro controle TextBox. Para isso vamos incluir o script a seguir na seção <head> da página Default.aspx:

 <script type="text/javascript">
        $(document).ready(function () {
            $('#ID_Controle_TextBox').bind('paste', function (e) {
                e.preventDefault();
                alert("Você não pode colar texto neste campo!");
            });
        });

A sintaxe deste código é parecida com a usada no exemplo anterior, mas ao invés de selecionar todos os controles TextBox, estamos selecionando um controle TextBox em particular usando a sintaxe do selector : $('#ID_Controle_TextBox')

Aqui o ID_Controle_TextBox é o ID de um controle TextBox para o qual desejamos desabilitar o recurso.

Para o nosso exemplo este código ficaria assim :

 <script type="text/javascript">
        $(document).ready(function () {
            $('#TextBox6').bind('paste', function (e) {
                e.preventDefault();
                alert("Você não pode colar texto neste campo!");
            });
        });

Pelo código observemos que o recurso estará desabilitado para o campo TextBox de ID igual a TextBox6.

Neste exemplo ao invés de criar manipulador de eventos para os eventos copy e paste , criamos apenas um manipulador de evento para o evento paste.

O manipulador de eventos agora inclui uma chamada para a função alert() a qual exibe uma janela modal explicando ao usuário que ele não pode colar texto no TextBox.

Executando o projeto ao tentar colar algum texto na caixa de texto Confirmar Email teremos o seguinte resultado:

Nota: Se a página que você vai tratar estiver no interior de um container, como uma Master Page por exemplo, você deve atentar para o fato que neste caso os controles Web ao serem renderizados para HTML terão os valores ID acrescidos de um texto adicional pertinente, tendo portando alteração no seu ID. No caso do container ser uma Master Page, o ID campo Email teria acrescido um  texto do tipo ctl00_ContentPlaceHolder1_txtEmail.

Outro detalhe importante é que na verdade não podemos realmente impedir o usuário de usar os recursos de copiar e colar , o que estamos fazendo é usar JavaScript para desabilitar o recurso. Lembre-se que basta o cliente desabilitar no seu navegador e nosso recurso deixa de funcionar.

Pegue o projeto completo aqui: EvitarCopiarColar.zip

Eu sei é apenas ASP .NET, mas eu gosto...

Referências:

José Carlos Macoratti