Eventos de formulário: onfocus e onblur (focus e blur)

Neste tutorial, iremos aprender dois importantes eventos para se trabalhar com formulários em HTML e JavaScript o onblur e o onfocus (ou só focus e blur em event handler).

Apostila de JavaScript completa em PDF

Eventos onfocus e onblur de Formulários

O evento onfocus dispara quando algum tipo de formulário (como input) está selecionado, ou seja, quando estamos usando ele, clicamos, digitamos ou estamos exercendo alguma ação nele.

Já o evento onblur ocorre quando 'saímos' desse formulário.

Por exemplo, no código abaixo, se você clicar no formulário de input, o evento onfocus vai chamar a função dentro(), que pinta de vermelho o fundo do input, e quando você clicar fora do formulário, o evento onblur dispara e é acionada a função fora() que exibe pinta o inpt em azul:

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Clique dentro e fora:<input type="text" id="meuInput" 
                onfocus="dentro()" onblur="fora()">
 </body>
</html>

script.js:

function dentro()
{
   document.getElementById("meuInput").style.background = "red";
}

function fora()
{
   document.getElementById("meuInput").style.background = "blue";
}

Resultado:

Clique dentro e fora:

Event Handler: focus e blur

Os eventos se chamam onfocus e onblur na forma de propriedade de um elemento do HTML.
Se desejar trabalhar com estes eventos via JavaScript puramente, pelos event handlers e método addEventListener, os nomes são focus e onblur.

Veja como ficaria o exemplo anterior.
Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Clique dentro e fora:<input type="text" id="meuInput">
 </body>
</html>

script.js

window.onload = function(){
   function dentro()
   {
 document.getElementById("meuInput").style.background = "red";
   }

   function fora()
   {
 document.getElementById("meuInput").style.background = "blue";
   }

   document.getElementById("meuInput").addEventListener("focus", dentro);
   document.getElementById("meuInput").addEventListener("blur", fora);
}

Certamente você já viu esse tipo de efeito ao preencher algum formulário, principalmente aqueles grande, com vários campos.

Se você for criar um sistema que possui diversos formulários, é sempre interessante usar focus e blur, visto que facilitam para o usuário saber em que campo dos formulários ele está situado, isso o ajuda a não se perder e seu projeto terá uma cara mais profissional.

JavaScript Progressivo