13. Focar um Objecto

Este método permite que o cursor seja activado em um determinado objecto (focado). Isso pode ser feito na carga do documento, a partir da ocorrência de um evento ou mesmo dentro de uma função. Observe que até agora o usuário tinha que dar um " Click " para focar o objecto desejado.

De forma semelhante existe o método " Select ". Este método marca o conteúdo do objecto com uma tarja roxa, permitindo ao usuário, em caso de substituição do conteúdo do campo, não ter que apagar o conteúdo anterior, pois, com este método, a deleção dá-se de forma automática quando da digitação do novo conteúdo.

Os métodos " Focus " e " Select " podem ser utilizados nos seguintes objectos:

password, select, text e textarea.

No exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objecto do formulário e os métodos focus e select para, na rotina de crítica dos dados, focar o objecto que contiver erro de preenchimento.

Ex.:

DdosOk = true

function Criticar() {

DadosOk = false

DataAtual = new Date()

MesAtual = DataAtual.getMonth() + 1

AnoAtual = DataAtual.getYear() + 1900

Nome = document.TstFocus.Nome.value

Mes = parseInt(document.TstFocus.Mes.value)

Ano = parseInt (document.TstFocus.Ano.value)

if (Ano < 1900)

{Ano = Ano + 1900 } if (Nome == " ")

{ alert ( "Informe o seu Nome, Não deixe em branco ")

document.TstFocus.Nome.focus()

return }

if (Mes < 1 || Mes > 12)

{ alert ( "O Mês informado não é válido, informe corretamente ")

document.TstFocus.Mes.focus()

document.TstFocus.Mes.select()

return }

if (Ano == AnoAtual && Mes > MesAtual)

{ alert ( "O período informado é superior a data atual ")

document.TstFocus.Mes.focus()

document.TstFocus.Mes.select()

return }

if (Ano < 1996 || Ano > AnoAtual)

{ alert ( "O Ano informado não é válido, informe corretamente ")

document.TstFocus.Ano.focus()

document.TstFocus.Ano.select()

return }

DadosOk = true

}

</script>

<p>

Informe o seu Nome <input type=text size=30 maxlength=30 name= "Nome ">

</p>

<p> Informe o mês desejado <input type=text size=2 maxlength=2 name= "Mes ">

</p>

<p> Informe o ano desejado <input type=text size=4 maxlength=4 name= "Ano " >

</p>

<p> <input type=button name= "Testa " value= "Testar Validade "

onclick= "Criticar()

if (DadosOk)

{alert (‘Todos os Dados estão Corretos’) } " >

</p>

</form>

</body>

VOLTAR