Rimuovi la messa a fuoco da un elemento usando JavaScript

Durante l'aggiornamento di una pagina Web o di un sito, può esserci un requisito di aggiornamento per rimuovere la messa a fuoco dagli elementi nel modello di oggetti documenti (DOM). Ad esempio, dà la priorità agli elementi aggiornati rispetto a quelli obsoleti in una pagina web. In tali scenari, rimuovere l'attenzione da un elemento che utilizza JavaScript è di grande aiuto nel apportare emendamenti a un sito.

Questo blog spiegherà la procedura per rimuovere l'attenzione da un elemento usando JavaScript.

Come rimuovere l'attenzione da un elemento in JavaScript?

Per rimuovere l'attenzione da un elemento in JavaScript, applica i seguenti approcci in combinazione con "sfocatura()" metodo:

• "getElementById ()" metodo.
• "ActiveSelement"Proprietà e"incatenamento opzionale (?.)"Operatore.

Approccio 1: rimuovere la messa a fuoco da un elemento in JavaScript usando il metodo getElementById ()

IL "sfocatura()"Il metodo rimuove l'attenzione dall'elemento associato e il"getElementById ()"Il metodo restituisce un elemento con il specificato"id". Questi metodi possono essere applicati in combinazione per recuperare l'elemento focalizzato e rimuoverlo con l'aiuto della funzione definita dall'utente.

Sintassi

documento.getElementById (elemento)

Nella sintassi data:

"elemento"Corrisponde all'elemento che deve essere recuperato contro il particolare"id".

Esempio

Panoramiamo il seguente esempio:

Questa è una pagina web



Cliccami

Nelle righe di codice sopra:

• Includere un ""Elemento con gli attributi dichiarati.
• IL "tipo"L'attributo indica che l'elemento è un"Radio"Pulsante. IL "autofocus"È un attributo booleano che aggiunge attenzione all'elemento associato.
• Nel passaggio successivo, crea un pulsante con un "al clic"Evento che reindirizzerà alla funzione removeFocus ().
• Nel codice JS, definisci una funzione denominata "Rimuovifocus ()". Nella definizione della funzione, accedi all'elemento contenuto con "id" usando il "getElementById ()" metodo.
• Infine, applica il “sfocatura()"Metodo all'elemento recuperato. Ciò di conseguenza rimuoverà la messa a fuoco dall'elemento sul clic del pulsante.

Produzione

Nell'output, si può vedere che il focus dal pulsante di opzione viene omesso sul clic del pulsante.

Approccio 2: rimuovere la messa a fuoco da un elemento in JavaScript usando la proprietà ActiveElement e il concatenamento opzionale (?.) Operatore

IL "ActiveSelement"La proprietà dà l'elemento HTML che ha attenzione e"incatenamento opzionale (?.)"Controlla l'operatore per una condizione particolare. Questi approcci possono essere utilizzati in combinazione per applicare un controllo sugli elementi focalizzati e sfocarsi di conseguenza.

Esempio

Passiamo attraverso l'esempio di seguito:

Pitone



JavaScript



Fare clic sul pulsante per rimuovere la messa a fuoco

Nel frammento di codice sopra:

• Includere due ""Elementi che hanno l'attributo assegnato"tipo" come un "Casella di controllo".
• L'attributo booleano "autofocus"È assegnato a quest'ultima casella di controllo, come indicato.
• Quindi, crea un pulsante con un "al clic"Evento che accede alla funzione denominata removeFocus ().
• Nella parte del codice JS, definire una funzione denominata "Rimuovifocus ()".
• Nella sua definizione, applica il combinato "ActiveSelement"Proprietà e"incatenamento opzionale (?.)"Operatore per verificare tutti gli elementi focalizzati all'interno del codice.
• Il associato "sfocatura()"Il metodo offuscerà gli elementi focalizzati posizionati sul clic del pulsante.

Produzione

Nell'output, l'attenzione dalla casella di controllo dichiarata viene rimossa al clic del pulsante.

Conclusione

IL "sfocatura()Metodo combinato con il "getElementById ()Metodo o il "ActiveSelement"Proprietà e"incatenamento opzionale (?.)"L'operatore può essere utilizzato per rimuovere/omettere l'attenzione da un elemento in JavaScript. Il primo approccio può essere applicato per ottenere l'elemento focalizzato e rimuovere la messa a fuoco da esso sul clic del pulsante. Quest'ultimo approccio può essere utilizzato per verificare gli elementi focalizzati e sfocarlo. Questo articolo spiega come rimuovere/omettere l'attenzione da un elemento in JavaScript.