Menu

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.:

<body onload="document.TstFocus.Nome.focus()">

<script>

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>

<form name="TstFocus" method="POST">

<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>
CDs
VOLTAR