Come impostare il focus di un elemento del modulo HTML in JavaScript

Concentrarsi sull'elemento si riferisce alla sezione della pagina attualmente attiva. Nel presente documento, un elemento HTML può essere focalizzato alla volta, che potrebbe essere una finestra, una casella di testo o un pulsante. Nei moduli HTML, il campo di input dovrebbe essere un elemento attivo, poiché molti elementi non consentono di concentrarsi per impostazione predefinita. Quindi, per concentrarsi sugli elementi, usa HTMlelement.Metodo focus ().

Questo post sul blog illustrerà il processo di impostazione dell'attenzione su un elemento di un modulo HTML in JavaScript.

Come impostare il focus di un elemento del modulo HTML in JavaScript?

Per l'impostazione di focus su un elemento di un modulo HTML, è possibile utilizzare il metodo JavaScript focus (). Per fare ciò, chiama questo metodo mentre lo passano l'oggetto dell'elemento che deve essere concentrato.

Sintassi
Seguire il metodo di seguito per concentrarsi su un elemento di una forma HTML:

Htmlelement.messa a fuoco()

Proviamo alcuni esempi per vedere come impostare Focus su un elemento mentre si carica a pagina o sull'obbligo di un elemento.

Esempio 1: imposta il focus di un elemento modulo HTML nel caricamento della pagina
Nell'esempio dato, imposteremo Focus sul campo di testo di input sul caricamento della pagina. Quindi, crea un modulo con un campo di testo di input che sarà attivo mentre la pagina si carica:

Il modulo HTML sembrerà così:

Come puoi vedere, l'output sopra mostra un campo di input che non è attivo. Quindi, per concentrarsi su questa casella di testo, usa il codice JavaScript di seguito:

finestra.onload = function ()
documento.getElementById ("Testo").messa a fuoco();

Nelle righe di codice sopra:

• Definire una funzione su "finestra.Onload"Evento.
• Chiama il "messa a fuoco()"Metodo recuperando l'elemento HTML"casella di testo"Usando l'ID assegnato con l'aiuto di"getElementById ()" metodo.

L'output corrispondente sarà il seguente:

Il GIF sopra indica che la casella di testo è attiva nel caricamento della pagina.

Quindi, vediamo come impostare concentrazione sul campo di input mentre si libra sull'elemento.

Esempio 2: imposta il focus di un elemento modulo HTML su mouse l'elemento
Per impostare l'attenzione sulla casella di testo mentre si libra su di essa, usa "onmouseover"Ascoltatore di eventi:

Definire una funzione chiamata "ElementFocus ()"Ciò attiverà mentre si verifica l'evento MouseOver:

funzione elementFocus ()
documento.getElementById ("Testo").messa a fuoco();

L'output mostra che la casella di testo sarà attiva mentre il mouse si libra su di esso:

Abbiamo fornito le informazioni essenziali relative alla focalizzazione dell'elemento HTML in un modulo HTML usando JavaScript.

Conclusione

Per impostare Focus su un elemento di un modulo HTML in JavaScript, usa il “Htmlelement.messa a fuoco()" metodo. Può essere impostato sugli elementi HTML come "casella di testo","pulsante" e così via. È possibile impostare Focus sull'elemento durante il caricamento della pagina o qualsiasi altro evento. Questo blog ha illustrato il processo per impostare concentrarsi su un elemento di un modulo HTML in JavaScript.