JavaScript | Foco
Para entender melhor o foco() Método, observe sua sintaxe abaixo:
elemento.Foco (opções);
Nesta sintaxe:
- elemento: é a referência de um elemento HTML dentro de JavaScript.
- opções: não é um parâmetro necessário.
Exemplo 1: foco em um campo de texto usando o método focus ()
Comece criando um novo documento HTML e nesse documento, crie um campo de entrada e um botão com as seguintes linhas:
Nas linhas acima:
- A tag de entrada recebeu o ID como “TF1”
- O botão tem o ID como “BTN1”E um atributo onclick conjunto igual a“ ButtonClicked () ”
A execução deste documento HTML exibe o seguinte no navegador:
O campo de texto e o botão são exibidos na página da web. Agora, para adicionar a funcionalidade no botão Pressione, adicione as seguintes linhas no arquivo JavaScript:
função buttonClicked ()
tf = documento.getElementById ("tf1");
tf.foco();
Nas linhas JavaScript acima:
- Primeiro crie uma função nomeada como ButtonClicked ()
- Nessa função, obtenha a referência do campo de texto usando seu ID e armazenar essa referência no “tf" variável
- Depois disso, basta ligar para o foco() Método com o “tf”Variável com a ajuda do operador DOT
Neste ponto, a página da web produz o seguinte resultado:
É observável na saída, que pressionar a colocação coloca o campo de texto como ativo ou “em foco”.
Exemplo 2: foco em um elemento com argumentos de "opções"
Neste exemplo, o principal objetivo é ter um elemento em uma posição rolável. Depois disso, o botão não deve apenas se concentrar nesse elemento, mas também levar esse elemento à vista do documento.
Comece criando um documento HTML e, assim como no primeiro exemplo, crie um campo de texto e um botão com as seguintes linhas:
type = "texto"
id = "tf1"
class = "rolado"
espaço reservado = "Eu sou um campo de texto"
/>
Nessas linhas, a única diferença é:
- A entrada que agora tem uma aula “rolado”, Que será usado para colocar esta tag de entrada em uma posição rolável no documento
Depois disso, adicione as seguintes linhas ao arquivo CSS ou no marcação:
corpo
Altura: 7000px;
.rolado
Posição: Absoluto;
Top: 4000px;
Nas linhas mencionadas acima:
- O documento tem sido uma altura de 7000px para que o documento fique rolável
- Depois disso, estamos definindo o elemento com o rolado classe para uma posição absoluta de 4000px do topo
A execução deste documento HTML fornece a seguinte página da web no navegador:
Da saída, fica claro que o campo de texto agora é colocado em uma posição de 4000px do topo.
Depois disso, vamos adicionar as seguintes linhas de JavaScript:
função buttonClicked ()
tf = documento.getElementById ("tf1");
tf.foco (preventcroll: false);
Nessas linhas:
- Uma função ButtonClicked () é feito
- Nessa função, uma referência ao campo de texto é feita usando seu ID e armazenado dentro da variável “tf”.
- Depois disso, aplique o foco() método no campo de texto e em seu argumento passa PreventCroll: false. Isso trará o elemento em foco e role o documento para trazer esse elemento à vista.
Execute o documento HTML e você obterá o seguinte resultado ao clicar no botão:
É observável da saída que, ao clicar no botão, o campo de texto é trazido para a vista do navegador, rolando o documento. Além disso, o campo de texto agora está sendo focado.
Conclusão
Este artigo lança luz sobre o objetivo e o funcionamento do foco() Método em JavaScript. Este método é usado para trazer um elemento do documento HTML em foco, ou em palavras muito mais simples, ele define sua propriedade ativa como verdadeira. Para aplicar este método, basta usá -lo com a referência do elemento HTML com um operador de ponto. Esse método de foco também pode assumir um argumento opcional que foi demonstrado acima.