Desta vez faremos um workshop muito rápido e simples com Javascript para fazer com que um campo de formulário de tipo texto encontre-se inibido, ou seja, que não possamos clicar encima dele para editar seu conteúdo.

Focus e Blur

A maneira de fazê-lo requer o conhecimento de dois conceitos habituais de Javascript relacionados com o foco da aplicação.

O conceito focus, está relacionado com ganhar foco da aplicação. O método focus(), que têm os campos de texto e outros elementos de formulário, serve para outorgar o foco da aplicação a esse elemento. O administrador de evento onfocus aparece quando um elemento ganha o foco da aplicação.

O conceito blur, está associado a perder o foco da aplicação. O método blur() serve para que os elementos de formulário percam o foco e o administrador de eventos onblur se ativa quando o elemento a que o apliquemos perda o foco da aplicação.

O exercício

Para inibir um campo de formulário podemos fazer com que o usuário nunca possa clicar nesse elemento ou então, que se chegar a clicar seja repelido imediatamente. Para isto o único que temos que fazer é retirar o foco de um elemento quando tiver ganhado.

Nós utilizaremos o evento onfocus para detectar o instante no qual o elemento ganha o foco e nesse momento faremos uso do método blur() para retirar o foco.

O código é extremamente simples para tanta explicação:

<form>
<input type="text" value="122" onfocus="this.blur()">
</form>

O único detalhe que vale a pena assinalar é o uso da palavra this, que faz referência ao elemento onde se está utilizando, nesse caso o campo de texto. this.blur() seria uma simples chamada ao método blur() no elemento de formulário onde está colocada.

Pode ser visto em funcionamento aqui: