Wie setze ich den Fokus unabhängig von der ID auf das erste Eingabeelement in einem HTML-Formular?

Gibt es eine einfache Möglichkeit, den Fokus (Eingabecursor) einer Webseite auf das erste Eingabeelement (Textfeld, Dropdown-Liste, ...) beim Laden der Seite zu setzen, ohne die ID des Elements kennen zu müssen?

Ich möchte es als gemeinsames Skript für alle meine Seiten / Formen meiner Webanwendung implementieren.

Sie können auch die jQuery-basierte Methode ausprobieren:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

Obwohl dies die Frage nicht beantwortet (was ein gemeinsames Skript erfordert), könnte es für andere nützlich sein zu wissen, dass HTML5 das Attribut "Autofokus" einführt:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Das Eintauchen in HTML5 bietet weitere Informationen.

document.forms[0].elements[0].focus();

Dies kann mit einer Schleife verfeinert werden, um z. bestimmte Feldtypen, deaktivierte Felder usw. nicht fokussieren. Besser ist es, dem Feld, auf das Sie sich konzentrieren möchten, eine Klasse = "Autofokus" hinzuzufügen und die Formulare [i] .elements [j] zu durchlaufen, um nach diesem Klassennamen zu suchen.

Jedenfalls: Es ist normalerweise nicht eine gute Idee, dies auf jeder Seite zu tun. Wenn Sie eine Eingabe fokussieren, verliert der Benutzer die Fähigkeit, z. Scrollen Sie die Seite von der Tastatur aus. Wenn dies unerwartet ist, kann dies ärgerlich sein. Sie können also nur dann automatisch fokussieren, wenn Sie sich ziemlich sicher sind, dass die Verwendung des Formularfelds das ist, was der Benutzer tun möchte. dh. Wenn Sie Google sind.

Der umfassendste jQuery-Ausdruck, den ich gefunden habe, ist (mithilfe von hier )

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

Wenn Sie das Prototype JavaScript-Framework verwenden, können Sie die focusFirstElement- Methode verwenden:

Form.focusFirstElement(document.forms[0]);

Hier gibt es eine Beschreibung, die von Nutzen sein kann: Setzen Sie den Fokus auf Erste Eingabe auf der Webseite

Sie müssen auch alle versteckten Eingaben überspringen.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();

Wenn Sie diesen Code am Ende Ihres bodyTags einfügen, wird das erste sichtbare, nicht ausgeblendete aktivierte Element automatisch auf dem Bildschirm fokussiert. Es wird die meisten Fälle behandeln, die ich kurzfristig finden kann.

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>

Versuchte viele der obigen Antworten und sie funktionierten nicht. Gefunden bei: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Vielen Dank, Kolodvor.

$("input:text:visible:first").focus();

Ich benutze dies:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

Dies erhält die erste sichtbare gemeinsame Eingabe, einschließlich Textbereichen und Auswahlfeldern. Dies stellt auch sicher, dass sie nicht ausgeblendet, deaktiviert oder schreibgeschützt sind. Es ermöglicht auch ein Ziel-Div, das ich in meiner Software verwende (dh erste Eingabe innerhalb dieses Formulars).

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

Verwenden Sie Folgendes, wenn Sie JSF2.2 + verwenden und den Autofokus nicht als Attribut ohne Wert übergeben können:

 p:autofocus="true"

Und fügen Sie es dem Namespace p hinzu (auch häufig verwendet pt. Was auch immer Sie möchten).

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

Mit AngularJS:

angular.element('#Element')[0].focus();

Dies schließt Textbereiche ein und schließt Optionsfelder aus

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});

Sie sollten clientHeight verwenden können, anstatt nach dem Anzeigeattribut zu suchen, da ein übergeordnetes Element dieses Element möglicherweise ausblendet:

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}

Verwenden Sie ohne Bibliotheken von Drittanbietern so etwas wie

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

Stellen Sie sicher, dass Sie alle Formularelement-Tags berücksichtigen, versteckte / deaktivierte Tags wie in anderen Antworten ausschließen und so weiter.

ohne Abfrage, zB mit normalem Javascript:

document.querySelector('form input:not([type=hidden])').focus()

funktioniert auf Safari, aber nicht auf Chrome 75 (April 2019)