Imposta il focus di un elemento del modulo HTML in JavaScript

1. Imposta lo stato attivo nell’input con JavaScript
2. Imposta lo stato attivo nell’area di testo con JavaScript
3. Imposta lo stato attivo nella casella di selezione o nel menu a discesa con JavaScript

Concentrarsi su un campo per l’input dell’utente è una funzionalità UI/UX che consente di continuare a digitare in un campo senza fare clic su di esso. Potrebbe essere necessario applicare dinamicamente il focus su un campo modulo, specialmente se il modulo è lungo e ha molti campi di input. Se un campo del modulo presenta un errore di convalida, sarà difficile per l’utente capire il campo in tale scenario. Quindi, avere un focus impostato sul campo in javascript durante la convalida e lo scorrimento automatico al campo di errore indica l’errore direttamente all’utente invece di perdere tempo a capire dove si trovava l’errore. In JavaScript abbiamo il metodo .focus(). Vediamo come possiamo applicarli a quanto segue.

Imposta lo stato attivo nell’input con JavaScript

Per concentrarci su un campo di input, dobbiamo prima selezionare il campo. Ci sono vari metodi per farlo. Possiamo utilizzare uno dei seguenti metodi.

• document.getElementById(): interroga l’elemento in base al suo id. Di solito gli id ​​sono univoci, quindi la funzione getElementById() restituisce l’elemento in modo univoco. Se sono presenti più elementi con lo stesso ID, restituisce il primo elemento con l’ID specificato.
• document.getElementsByClassName(): seleziona l’elemento in base al nome della classe. Di solito restituisce un array di elementi che qualificano i criteri.
• querySelector(): il metodo JavaScript seleziona l’elemento in base al suo id, nome della classe o anche con il tag dell’elemento HTML. La funzione restituisce un singolo elemento HTML che soddisfa i criteri passati come parametro. In questo articolo, utilizzeremo la funzione getElementById() per semplicità di rappresentazione. Una volta selezionato l’elemento, possiamo mettere a fuoco l’elemento usando il metodo .focus(). Di seguito è riportata la sintassi per .focus.

document.getElementById('input-id').focus();

Imposta il focus su un campo di input

I seguenti set di codice si concentrano sul campo di input al caricamento della pagina.

<input id="username-input" type="text" name="username">

window.onload = function() {
  document.getElementById('username-input').focus();
}

Imposta lo stato attivo su un campo di input in un modulo HTML

Se l’elemento di input fa parte di un form, invece di interrogare l’elemento usando il getElementById(), possiamo usare il riferimento al nome del form. La sintassi per l’utilizzo è la seguente:

document.<Form name>.<Field name>.focus();

Ad esempio, supponiamo di avere un modulo di accesso con un campo di input. Possiamo impostare il focus del campo di input applicando il seguente codice. Il codice metterà a fuoco il campo di immissione del nome utente. Ci sono poche cose di cui occuparsi durante l’utilizzo del nome del modulo e del nome del campo affinché il codice seguente funzioni.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function() {
  document.LoginForm.UserName.focus();
}

Osservazioni

• Durante l’impostazione del focus di un input in un form, dobbiamo assegnare l’attributo name al form HTML e al campo a cui ci rivolgiamo. Se non viene specificato alcun nome, sarà difficile eseguire una query per l’elemento.
• Questo metodo non supporta i nomi di tag con trattini in questo metodo. Quindi il nome assegnato al modulo HTML o all’elemento dovrebbe essere il maiuscolo cammello (come UserName) o il minuscolo (come il nome utente).
• Per moduli più lunghi con molti campi come input, aree di testo, ecc., è bene impostare l’attributo scroll sull’elemento in modo che il browser scorra automaticamente l’elemento HTML selezionato nella visualizzazione. È un comportamento previsto previsto dall’utente. Altrimenti finirà per chiedersi perché il modulo non è valido.

document.getElementById("myButton").focus({preventScroll:false});

Imposta lo stato attivo nell’area di testo con JavaScript

Possiamo usare la funzione .focus() per mettere a fuoco un’area di testo. Di solito, per mettere a fuoco in un’area di testo usiamo document.getElementById("my-text-area").focus(). È simile all’utilizzo della funzione .focus() in un campo di input. Se intendiamo utilizzare l’area di testo all’interno di un tag di modulo HTML, possiamo applicare il riferimento al nome del modulo insieme al nome dell’area di testo per concentrarci su di esso. Fare riferimento al codice seguente.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function() {
  document.LoginForm.description.focus();
}

In questo metodo, dobbiamo assegnare un nome al form e all’elemento HTML di destinazione. Le regole per nominare gli elementi sono le stesse del campo di input.

Imposta lo stato attivo nella casella di selezione o nel menu a discesa con JavaScript

Il metodo .focus() funziona su caselle di selezione o menu a discesa. Se utilizzato all’interno di un modulo, è possibile utilizzare document.FormName.SelectBoxName.focus() per impostare lo stato attivo sul menu a discesa. Di seguito è riportato il codice che elabora l’utilizzo.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.LoginForm.occupationSelect.focus();
}