Como definir o foco de um elemento de formulário HTML em JavaScript

Como definir o foco de um elemento de formulário HTML em JavaScript
Foco no elemento refere -se à seção da página atualmente ativa. No presente documento, um elemento HTML pode ser focado em um momento, o que pode ser uma janela, caixa de texto ou botão. Nos formulários HTML, o campo de entrada deve ser um elemento ativo, pois muitos elementos não permitem focar por padrão. Então, para focar nos elementos, use o htmlelement.Focus () Método.

Esta postagem do blog ilustrará o processo de definir o foco em um elemento de um formulário HTML em JavaScript.

Como definir o foco de um elemento de formulário HTML em JavaScript?

Para definir o foco para um elemento de um formulário HTML, o método javascript focus () pode ser usado. Para fazer isso, chame esse método ao passar o objeto do elemento que precisa ser focado.

Sintaxe
Siga o método abaixo mencionado para se concentrar em um elemento de um formulário HTML:

HTMLELEMENT.foco()

Vamos tentar alguns exemplos para ver como definir o foco em um elemento enquanto está carregando a página ou no pau de um elemento.

Exemplo 1: Defina o foco de um elemento de formulário HTML na página Carregar
No exemplo dado, definiremos o foco no campo de texto de entrada na página Carregar. Portanto, crie um formulário com um campo de texto de entrada que estará ativo enquanto a página carrega:



O formulário HTML ficará assim:

Como você pode ver, a saída acima mostra um campo de entrada que não está ativo. Portanto, para se concentrar nesta caixa de texto, use o código JavaScript abaixo:

janela.OnLoad = function ()
documento.getElementById ("texto").foco();

Nas linhas acima do código:

  • Defina uma função no “janela.carregandoEvento.
  • Ligar para "foco()”Método buscando o elemento HTML“caixa de texto”Usando seu ID atribuído com a ajuda do“getElementById ()”Método.

A saída correspondente será a seguinte:

O GIF acima indica que a caixa de texto está ativa na página Carregar.

Em seguida, vamos ver como definir o foco no campo de entrada enquanto pairava no elemento.

Exemplo 2: Defina o foco de um elemento de formulário HTML em pairar o elemento
Para definir o foco na caixa de texto enquanto pairava, use o “OnMouseOver"Ouvinte do evento:



Defina uma função chamada “ElementFocus ()”Isso acionará enquanto o evento MouseOver ocorre:

função elementfocus ()
documento.getElementById ("texto").foco();

A saída mostra que a caixa de texto estará ativa enquanto o mouse pague nela:

Fornecemos as informações essenciais relacionadas ao foco do elemento HTML em um formulário HTML usando JavaScript.

Conclusão

Para definir o foco em um elemento de uma forma HTML em JavaScript, use o “HTMLELEMENT.foco()”Método. Pode ser definido nos elementos html como “caixa de texto","botão" e assim por diante. Você pode definir foco no elemento enquanto estiver na página Carregar ou em qualquer outro evento. Este blog ilustrou o processo para definir o foco em um elemento de uma forma HTML em JavaScript.