Eliminar el foco de un elemento usando JavaScript

Al actualizar una página web o sitio, puede haber un requisito de actualización para eliminar el enfoque de los elementos (s) en el modelo de objeto de documento (DOM). Por ejemplo, priorizar los elementos actualizados sobre los obsoletos en una página web. En tales escenarios, eliminar el enfoque de un elemento que usa JavaScript es de gran ayuda para hacer enmiendas a un sitio.

Este blog explicará el procedimiento para eliminar el enfoque de un elemento usando JavaScript.

Cómo eliminar el enfoque de un elemento en JavaScript?

Para eliminar el enfoque de un elemento en JavaScript, aplique los siguientes enfoques en combinación con el "difuminar()" método:

• "getElementById ()" método.
• "ActiveElement"Propiedad y"encadenamiento opcional (?.)"Operador.

Enfoque 1: Elimine el enfoque de un elemento en JavaScript usando el método getElementById ()

El "difuminar()"El método elimina el enfoque del elemento asociado y el"getElementById ()"El método devuelve un elemento que tiene el especificado"identificación". Estos métodos se pueden aplicar en combinación para obtener el elemento enfocado y eliminar el enfoque de él con la ayuda de la función definida por el usuario.

Sintaxis

documento.getElementById (elemento)

En la sintaxis dada:

"elemento"Corresponde al elemento que necesita ser obtenido contra lo particular"identificación".

Ejemplo

Vamos a ver el siguiente ejemplo:

Esta es una página web



Haz click en mi

En las líneas de código anteriores:

• Incluir un ""Elemento tiene los atributos establecidos.
• El "tipo"El atributo significa que el elemento es un"radio" botón. El "enfoque automático"Es un atributo booleano que agrega enfoque al elemento asociado.
• En el siguiente paso, cree un botón que tenga un "al hacer clic"Evento que redirigirá a la función removeFocus ().
• En el código JS, defina una función llamada "removefocus ()". En la definición de la función, acceda al elemento contenido por su "identificación" utilizando el "getElementById ()" método.
• Por último, aplique el "difuminar()Método para el elemento recuperado. Esto eliminará el foco del elemento al hacer clic en el botón.

Producción

En la salida, se puede ver que el enfoque del botón de radio se omite en el botón Haga clic.

Enfoque 2: Elimine el enfoque de un elemento en JavaScript utilizando la propiedad ActiveElement y el encadenamiento opcional (?.) Operador

El "ActiveElement"La propiedad ofrece el elemento HTML que tiene enfoque, y el"encadenamiento opcional (?.)"El operador verifica una condición particular. Estos enfoques se pueden utilizar en combinación para aplicar un control sobre los elementos enfocados y desdibujelos en consecuencia.

Ejemplo

Pasemos por el ejemplo declarado a continuación:

Pitón



Javascript



Haga clic en el botón para eliminar el enfoque

En el fragmento de código anterior:

• Incluir dos ""Elementos que tienen el atributo asignado"tipo" como un "caja".
• El atributo booleano "enfoque automático"Se asigna a la última casilla de verificación, como se indica.
• A continuación, cree un botón que tenga un "al hacer clic"Evento acceder a la función llamada removeFocus ().
• En la parte del código JS, defina una función llamada "removefocus ()".
• En su definición, aplique el combinado "ActiveElement"Propiedad y la"encadenamiento opcional (?.)"Operador para verificar todos los elementos enfocados dentro del código.
• El asociado "difuminar()El método "desdibuirá los elementos enfocados ubicados en el clic del botón.

Producción

En la salida, el enfoque de la casilla de verificación indicada se elimina al hacer clic en el botón.

Conclusión

El "difuminar()"Método combinado con el"getElementById ()"Método o el"ActiveElement"Propiedad y"encadenamiento opcional (?.)El operador se puede utilizar para eliminar/omitir el foco de un elemento en JavaScript. El enfoque anterior se puede aplicar para obtener el elemento enfocado y eliminar el enfoque de él en el clic del botón. El último enfoque se puede utilizar para verificar los elementos enfocados y difuminarlo. Este artículo explica cómo eliminar/omitir el enfoque de un elemento en JavaScript.