Exemplo do evento onblur em Javascript

Script em Javascript que mostra o trabalho com o evento onblur. Comprova-se a validade de um dado ao sair do campo de texto aonde está escrito.

Onblur se ativa quando o usuário retira o foco da aplicação de um elemento da página. O foco da aplicação é o lugar onde está o cursor.

Se por exemplo, estamos situados em um campo de texto e saímos de tal campo, Seja porque clicamos com o mouse em outro campo do formulário ou em uma área vazia, ou seja porque o usuário apertou o botão tabulador (Tab) que move o foco até o seguinte elemento da página.

Se eu desejo que, ao se situar fora de um campo de texto, se comprove que o valor introduzido é correto posso utilizar onblur e chamar a uma função que comprove se o dado é correto. Se não for correto posso obrigar ao foco da aplicação a se situar novamente sobre o campo de texto e avisar ao usuário para que mude tal valor.

Pode ser uma maneira interessante de assegurarmos que em um campo de texto encontra-se um valor válido. Embora tenha algum problema, como veremos mais adiante.

Vamos começar por um caso simples, no qual somente desejamos comprovar um campo de texto para assegurarmos que é um número inteiro.

<html>
<head>
    <title>Evento onblur</title>

<script>
function validarInteiro(valor){
    //tento converter a inteiro.
    //se era um inteiro não lhe afeta, se não era tenta converte-lo
    valor = parseInt(valor)

    //Comprovo se é um valor numérico
    if (isNaN(valor)) {
       //então (não é número) devolvo o valor cadeia vazia
       return ""
    }else{
       //Em caso contrário (Se era um número) devolvo o valor
       return valor
    }
}

function comprovaValidoInteiro(){
    inteioValidado = validarInteiro(document.f1.numero.value)
    if (inteiroValidado == ""){
       //se era a cadeia vazia é que não era válido. Aviso
       alert ("Deve escrever um inteiro!")
       //seleciono o texto
       document.f1.numero.select()
       //coloco outra vez o foco
       document.f1.numero.focus()
    }else
       document.f1.numero.value = inteiroValidado
}
</script>
</head>
<body>
<form name=f1>
Escreva um número inteiro: <input type=text name=numero size=8 value="" onblur="comprovaValidoInteiro()">
</form>

</body>
</html>

Ao sair do campo de texto (onblur) se executa comprovaValidoInteiro(), que utiliza a função validarInteiro. Se o valor devolvido pela função não for o de um inteiro, neste caso se receberia uma cadeia vazia, mostra uma mensagem em uma caixa alert, seleciona o texto escrito na caixa e coloca o foco da aplicação na caixa de texto, para que o usuário coloque outro valor.

Até que o visitante não escreva um número inteiro no campo de texto o foco da aplicação permanecerá no campo e continuará recebendo mensagens de erro.

Podemos ver este exemplo em funcionamento em uma página a parte.