JavaScript | Messa a fuoco

In JavaScript, il metodo Focus () viene utilizzato per impostare Focus su qualsiasi elemento della pagina Web HTML, il che significa che imposta quell'elemento come elemento attivo. Il punto chiave qui è che si concentra solo sugli elementi che "Potere"Sii concentrato su. In parole semplici, non tutti gli elementi possono essere concentrati.

Per capire meglio il messa a fuoco() Metodo, guarda la sua sintassi di seguito:

elemento.Focus (opzioni);

In questa sintassi:

• elemento: è il riferimento di un elemento HTML all'interno di JavaScript.
• opzioni: non è un parametro richiesto.

Esempio 1: concentrarsi su un campo di testo usando il metodo Focus ()

Inizia creando un nuovo documento HTML e in quel documento, crea un campo di input e un pulsante con le seguenti righe:

Concentrati sul campo di testo

Nelle righe sopra:

• Il tag di input è stato dato l'ID come "TF1"
• Il pulsante ha l'ID come "btn1"E un attributo OnClick uguale a" ButtonClicked () "

L'esecuzione di questo documento HTML visualizza quanto segue nel browser:

Il campo di testo e il pulsante sono entrambi visualizzati nella pagina web. Ora per aggiungere la funzionalità al pulsante Premere, aggiungi le seguenti righe nel file JavaScript:

Funzione ButtonClicked ()
TF = documento.getElementById ("TF1");
tf.messa a fuoco();

Nelle linee javascript sopra:

• Crea prima una funzione denominata come Buttonclicked ()
• In quella funzione, ottieni il riferimento del campo di testo usando il suo ID e memorizza quel riferimento in "tf"Variabile
• Dopodiché, chiama semplicemente il messa a fuoco() Metodo con il "tf"Variabile con l'aiuto dell'operatore DOT

A questo punto, la pagina web produce il seguente risultato:

È osservabile nell'output, che premere il put mette il campo di testo come attivo o "messo a fuoco".

Esempio 2: concentrarsi su un elemento con argomenti "opzioni"

In questo esempio, l'obiettivo principale è avere un elemento in una posizione scorrevole. Successivamente, il pulsante non dovrebbe solo concentrarsi su quell'elemento, ma anche mettere in vista quell'elemento dal documento.

Inizia creando un documento HTML e, proprio come nel primo esempio, crea un campo di testo e un pulsante con le seguenti righe:

type = "testo"
id = "tf1"
class = "scorte"
Placeholder = "Sono un campo di testo"
/>

Concentrati sul campo di testo

In queste righe l'unica differenza è:

• L'input che ora ha una classe "scorciato", Che verrà utilizzato per posizionare questo tag di input in una posizione scorrevole nel documento

Successivamente, aggiungi le seguenti righe al file CSS o nel etichetta:

corpo
Altezza: 7000px;

.scorciato
Posizione: assoluto;
Top: 4000px;

Nelle righe sopra menzionate:

• Il documento è stato un'altezza di 7000px in modo che il documento diventi scorrevole
• Dopodiché, stiamo impostando l'elemento con il scorciato classe per una posizione assoluta di 4000px dall'alto

L'esecuzione di questo documento HTML fornisce la seguente pagina Web sul browser:

Dall'output, è chiaro che il campo di testo è ora posizionato in una posizione di 4000px dall'alto.

Successivamente, aggiungeremo le seguenti righe di JavaScript:

Funzione ButtonClicked ()
TF = documento.getElementById ("TF1");
tf.focus (prevenzioni: false);

In queste righe:

• Una funzione Buttonclicked () è fatto
• In quella funzione, viene fatto un riferimento al campo di testo usando il suo ID e memorizzato all'interno della variabile "tf".
• Dopodiché, applica il messa a fuoco() Metodo sul campo di testo e nel suo argomento prevenzioni croll: false. Ciò porterà l'elemento a fuoco e scorrere il documento per portare quell'elemento in vista.

Esegui il documento HTML e otterrai il seguente risultato facendo clic sul pulsante:

È osservabile dall'output che, facendo clic sul pulsante, il campo di testo viene portato alla vista del browser scorrendo il documento. Inoltre, il campo di testo è ora concentrato.

Conclusione

Questo articolo getta luce sullo scopo e sul funzionamento del messa a fuoco() Metodo in JavaScript. Questo metodo viene utilizzato per mettere a fuoco un elemento del documento HTML o in parole molto più semplici, imposta la loro proprietà attiva come vera. Per applicare questo metodo, usalo semplicemente con il riferimento dell'elemento HTML con un operatore DOT. Questo metodo di messa a fuoco può anche assumere un argomento opzionale che è stato dimostrato sopra.