Você está em: Home > Javascript/AJAX/DHTML > Visualizando artigo

Iniciando no Javascript: Exemplo do evento onblur - Parte 1

Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/402.php

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

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.

Enviado por xKuRt em 22/11/2006 às 15:55

Avaliação

Esta publicação ainda não foi avaliada!

A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.

Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).

Envio de comentário: