Wie kann ich den Fokus auf ein Element in einem HTML-Formular mit JavaScript setzen?

Question

Ich habe ein Webformular mit einem Textfeld darin. Wie kann ich das Textfeld standardmäßig fokussieren?

So etwas wie das:

Kann mir jemand dabei helfen? Ich weiß nicht, wie man den Fokus auf das Textfeld mit JavaScript setzt.

  function setFocusToTextBox(){
    //Was ist hier zu tun
  }

Answer 1

Gedanke, einige Randfälle zu diesem Thema zu teilen. Wenn Ihr Inhalt neu geladen wird (Beispiel: dynamisches Laden von DOM-Ergebnissen aus der API und Fokus auf das erste Element der Ergebnisse setzen), wird das Hinzufügen des Attributs autofocus nicht Ihre Lösung sein, es funktioniert nur beim ersten Laden, die zweite DOM-Änderung wird nicht funktionieren, funktioniert aber gut im statischen DOM oder beim Laden einer einzelnen Seite. Wenn Sie eine dynamische Komponente haben, die Daten lädt, schlägt ein einfacher .focus() fehl, weil der Fokus auf ein Element ausgelöst wird, das zum Zeitpunkt des focus() noch nicht erstellt wurde oder der blur noch nicht durch den DOM abgeschlossen ist. Für diesen Fall wird erwartet, dass eine Verzögerungszeit (setTimeout-Funktion) hinzugefügt wird, um der Zeit zu geben, den Fokus auf das neu erstellte oder neu erstellte Element im DOM anzuwenden. Mein Fall bestand darin, Daten von der API zu laden und den Fokus auf das erste Ergebnis zu legen. Durch das Hinzufügen von var el = document.getElementById(focusId); el.focus(); wurde das Problem gelöst, sodass der DOM den blur ohne Verzögerung abschließt.

Answer 2

Versuche dies aus:

$('.modal').on('shown.bs.modal', function () {
        setTimeout(function() {
                $("input#yourFieldId").addClass('modal-primary-focus').focus();
            },
            500);
    });

Answer 3

 //HTML code

let theinput = document.querySelector(".word"); //Hole das Eingabefeld
theinput.focus(); // Fokus auf Eingabefeld setzen