Evento onblur em Javascript
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.