Fokus eines HTML-Formularelements in JavaScript setzen

1. Setzen Sie den Fokus in der Eingabe mit JavaScript
2. Fokus im Textbereich mit JavaScript setzen
3. Setzen Sie den Fokus im Auswahlfeld oder Dropdown mit JavaScript

Die Fokussierung auf ein Feld für die Benutzereingabe ist eine UI/UX-Funktion, die es einem ermöglicht, mit der Eingabe in ein Feld fortzufahren, ohne darauf zu klicken. Möglicherweise müssen wir den Fokus dynamisch auf ein Formularfeld anwenden, insbesondere wenn das Formular lang ist und viele Eingabefelder enthält. Wenn ein Formularfeld einen Validierungsfehler aufweist, ist es für den Benutzer in einem solchen Szenario schwierig, das Feld herauszufinden. Wenn also während der Validierung ein Fokus auf das Feld in JavaScript gesetzt wird und automatisch zum Fehlerfeld gescrollt wird, wird der Fehler direkt dem Benutzer angezeigt, anstatt Zeit damit zu verschwenden, herauszufinden, wo der Fehler lag. In JavaScript haben wir die Methode .focus(). Lassen Sie uns sehen, wie wir diese auf die folgenden anwenden können.

Setzen Sie den Fokus in der Eingabe mit JavaScript

Um auf ein Eingabefeld zu fokussieren, müssen wir zuerst das Feld auswählen. Dazu gibt es verschiedene Methoden. Wir können eine der folgenden Methoden verwenden.

• document.getElementById(): Fragt das Element anhand seiner ID ab. Normalerweise sind IDs eindeutig, daher gibt die Funktion getElementById() das Element eindeutig zurück. Wenn mehrere Elemente mit derselben ID vorhanden sind, wird das erste Element mit der angegebenen ID zurückgegeben.
• document.getElementsByClassName(): Wählt das Element anhand seines Klassennamens aus. Es gibt normalerweise ein Array von Elementen zurück, die die Kriterien qualifizieren.
• querySelector(): Die JavaScript-Methode wählt das Element anhand seiner ID, seines Klassennamens oder sogar anhand des Tags des HTML-Elements aus. Die Funktion gibt ein einzelnes HTML-Element zurück, das die als Parameter übergebenen Kriterien erfüllt. In diesem Artikel verwenden wir zur Vereinfachung der Darstellung die Funktion getElementById(). Sobald wir das Element ausgewählt haben, können wir mit der Methode .focus() den Fokus auf das Element setzen. Nachfolgend die Syntax für .focus.

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

Fokus auf ein Eingabefeld setzen

Der folgende Code legt den Fokus auf das Eingabefeld beim Laden der Seite fest.

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

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

Fokus auf ein Eingabefeld in einem HTML-Formular setzen

Wenn das Eingabeelement Teil eines Formulars ist, können wir anstelle der Abfrage des Elements mit getElementById() die Formularnamensreferenz verwenden. Die Syntax für die Verwendung lautet wie folgt:

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

Nehmen wir zum Beispiel an, wir haben ein Anmeldeformular mit einem Eingabefeld. Wir können den Fokus des Eingabefelds setzen, indem wir den folgenden Code anwenden. Der Code wird den Fokus auf das Eingabefeld für den Benutzernamen setzen. Bei der Verwendung des Formularnamens und des Feldnamens sind einige Dinge zu beachten, damit der folgende Code funktioniert.

<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();
}

Bemerkungen

• Beim Setzen des Fokus einer Eingabe in einem Formular müssen wir dem HTML-Formular und dem Zielfeld das name-Attribut zuweisen. Wenn kein Name angegeben wird, ist es schwierig, das Element abzufragen.
• Diese Methode unterstützt keine Tag-Namen mit Bindestrichen in dieser Methode. Daher sollte der Name, der dem HTML-Formular oder dem Element zugewiesen wird, entweder in Kamelbuchstaben (wie UserName) oder in Kleinbuchstaben (wie Benutzernamen) angegeben werden.
• Bei längeren Formularen mit vielen Feldern wie Eingabe, Textbereichen usw. empfiehlt es sich, das Scroll-Attribut auf das Element zu setzen, damit der Browser das fokussierte HTML-Element automatisch in die Ansicht scrollt. Es ist ein beabsichtigtes Verhalten, das vom Benutzer erwartet wird. Andernfalls wird er sich am Ende fragen, warum das Formular ungültig ist.

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

Fokus im Textbereich mit JavaScript setzen

Wir können die Funktion .focus() verwenden, um den Fokus auf einen Textbereich zu setzen. Normalerweise verwenden wir zum Fokussieren in einem Textbereich document.getElementById("my-text-area").focus(). Es ist vergleichbar mit der Verwendung der Funktion .focus() in einem Eingabefeld. Wenn wir den Textbereich in einem HTML-Formular-Tag verwenden möchten, können wir die Formularnamensreferenz zusammen mit dem Textbereichsnamen anwenden, um darauf zu fokussieren. Siehe den folgenden Code.

<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();
}

Bei dieser Methode müssen wir dem Formular und dem Ziel-HTML-Element einen Namen zuweisen. Für die Benennung der Elemente gelten die gleichen Regeln wie für das Eingabefeld.

Setzen Sie den Fokus im Auswahlfeld oder Dropdown mit JavaScript

Die Methode .focus() funktioniert bei Auswahlfeldern oder Dropdowns. Bei Verwendung innerhalb eines Formulars kann mit document.FormName.SelectBoxName.focus() der Fokus auf das Dropdown gesetzt werden. Es folgt der Code, der die Verwendung erläutert.

<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();
}