Remova o foco de um elemento usando JavaScript

Ao atualizar uma página ou site da web, pode haver um requisito de atualização para remover o foco dos elementos no (s) Modelo de Objeto do Documento (DOM). Por exemplo, priorizando os elementos atualizados sobre os desatualizados em uma página da web. Nesses cenários, remover o foco de um elemento usando JavaScript é de grande ajuda para fazer emendas a um site.

Este blog explicará o procedimento para remover o foco de um elemento usando JavaScript.

Como remover o foco de um elemento em JavaScript?

Para remover o foco de um elemento em JavaScript, aplique as seguintes abordagens em combinação com o “borrão()”Método:

• ““getElementById ()”Método.
• ““ActiveElement”Propriedade e“encadeamento opcional (?.)Operador.

Abordagem 1: Remova o foco de um elemento em JavaScript usando o método getElementById ()

O "borrão()”O método remove o foco do elemento associado e o“getElementById ()”O método retorna um elemento com o especificado“eu ia”. Esses métodos podem ser aplicados em combinação para buscar o elemento focado e remover o foco dele com a ajuda da função definida pelo usuário.

Sintaxe

documento.getElementById (elemento)

Na sintaxe dada:

““elemento”Corresponde ao elemento que precisa ser buscado contra o particular“eu ia”.

Exemplo

Vamos ver o exemplo a seguir:

Esta é uma página da web



Clique em mim

Nas linhas acima do código:

• Inclua um “”Elemento com os atributos declarados.
• O "tipo”O atributo significa que o elemento é um“rádio" botão. O "auto-foco”É um atributo booleano que adiciona foco ao elemento associado.
• Na próxima etapa, crie um botão com um “ONCLICK”Evento que será redirecionado para a função Removafocus ().
• No código JS, defina uma função chamada “Remonefocus ()”. Na definição da função, acesse o elemento contido por seu “eu ia”Usando o“getElementById ()”Método.
• Por fim, aplique o “borrão()”Método para o elemento buscado. Isso resultará resultantes do foco do elemento no botão Clique.

Saída

Na saída, pode -se ver que o foco do botão de rádio é omitido no botão Clique.

Abordagem 2: Remova o foco de um elemento em JavaScript usando a propriedade ActiveElement e o encadeamento opcional (?.) Operador

O "ActiveElement”Propriedade fornece o elemento HTML que tem foco e o“encadeamento opcional (?.)”O operador verifica uma condição específica. Essas abordagens podem ser utilizadas em combinação para aplicar uma verificação nos elementos focados e embaçá -los de acordo.

Exemplo

Vamos passar pelo exemplo abaixo do ponto:

Pitão



JavaScript



Clique no botão para remover o foco

No trecho de código acima:

• Inclua dois “”Elementos com o atributo alocado“tipo" como um "Caixa de seleção”.
• O atributo booleano “auto-foco”É alocado para a última caixa de seleção, conforme declarado.
• Em seguida, crie um botão com um “ONCLICK”Evento acessando a função denominada Remonefocus ().
• Na parte do código JS, defina uma função chamada “Remonefocus ()”.
• Em sua definição, aplique o combinado “ActiveElement”Propriedade e a“encadeamento opcional (?.)Operador para verificar todos os elementos focados no código.
• O associado "borrão()”Método vai embaçar os elementos focados localizados no botão Clique.

Saída

Na saída, o foco da caixa de seleção declarado é removido com o clique do botão.

Conclusão

O "borrão()”Método combinado com o“getElementById ()”Método ou o“ActiveElement”Propriedade e“encadeamento opcional (?.)”O operador pode ser utilizado para remover/omitir o foco de um elemento em JavaScript. A abordagem anterior pode ser aplicada para obter o elemento focado e remover o foco dela no botão Clique. A última abordagem pode ser utilizada para verificar os elementos focados e embaçar. Este artigo explica como remover/omitir o foco de um elemento em javascript.