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

83

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.

splattne
quelle
7
BEMERKUNG Wenn das Formular so in der Seite abgelegt wird, dass der Benutzer die Seite nach unten scrollen muss, um das Formular anzuzeigen, wird durch Festlegen des Fokus automatisch die Seite nach unten gescrollt, wie dies ein Anker tun würde. Dies ist nicht sehr gut, da der Benutzer, der zu einer solchen Seite gelangt, diese sofort zur Formularposition scrollen sieht. Ich habe auf Safari und FF getestet (IE7 führt keinen Bildlauf durch).
Marco Demaio
@Marco_Demaio Meine Web-App ist so strukturiert, dass jede Seite ihre Eingabefelder oben im Fenster hat.
Splattne
3
Was passiert, wenn der Benutzer die Höhe des Browserfensters auf etwas kleiner als 768px ändert? Die Seite würde zu der Stelle scrollen, an der Sie den Fokus eingestellt haben. Wie auch immer, ich wollte Sie nur warnen, falls Sie nichts über ein so kleines Problem wussten. Ich wusste es auch nicht, bevor ich einige Tests durchgeführt habe.
Marco Demaio

Antworten:

96

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

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
Marko Dumic
quelle
Es klappt! Ich fange an, jQuery in meine Webanwendung zu integrieren. Ich denke, ich werde bei diesem Ansatz bleiben! Vielen Dank, Marko!
Splattne
3
Was passiert, wenn in diesem Fall das erste Formular auf der Seite ausgeblendet ist? Oder wenn das erste Element im Formular über CSS ausgeblendet ist? Das würde sicherlich scheitern. Ich bin natürlich pedantisch, aber so rolle ich.
James Hughes
In meinem Fall (mit ASP.NET) habe ich nur EIN Formular, das niemals ausgeblendet wird. Das funktioniert also bei mir.
Splattne
@ James Hughes, Sie können es als Funktion schreiben und bei Bedarf aufrufen, und Sie können Ausnahmen machen. Für mich hat diese Lösung wirklich geholfen.
Luci
Das funktioniert bei mir aus irgendeinem Grund nicht. sollte ich keinen Cursor sehen.
Chris
135

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.

Jacob Stanley
quelle
2
Autofokus ist der Attributname. Was ist mit seinem Wert? Etwas wie Autofokus = wahr, nicht benötigt? Was bedeutet es, keinen Wert zu setzen?
Geek
4
In HTML5 müssen einige Attribute keinen Wert haben. 'Checked' ist ein weiteres Attribut, bei dem dies der Fall ist. Ich glaube, wenn der Wert weggelassen wird, bedeutet dies, dass er mit dem Namen identisch ist (z. B. Autofokus = "Autofokus" und geprüft = "geprüft").
Jacob Stanley
Meine Spring-App bricht ab, wenn ich versuche, sie autofocusohne Wert zu verwenden spring:form. autofocus="autofocus"funktioniert aber gut. Danke, @Jacob.
Sergei Tachenov
2
@Geek Das Autofokus-Attribut ist wie viele andere ein boolescher Attributtyp. Aus diesem Grund wird es nur deklarativ verwendet, nicht durch Zuweisen eines Werts. Weitere Details finden Sie in der w3c-Spezifikation: w3.org/TR/html5/infrastructure.html#boolean-attribute
n1kkou
32
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.

Bobince
quelle
2
Sollte die richtige Antwort sein, da die Frage kein jquery-Tag hat.
Kalle H. Väravas
@ KalleH.Väravas nein, es sollte herabgestuft werden, weil es Annahmen macht, die nirgends in Frage zu stellen sind, z. Es gibt mindestens eine Form. Im Allgemeinen funktioniert es nicht.
9ilsdx 9rvj 0lo
17

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

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
ngeek
quelle
1
Ich habe dies verwendet und festgestellt, dass es im IE extrem langsam läuft, wenn eine große Anzahl von> 1000 Kontrollkästchen in einer Tabelle vorhanden ist. Sie sind sich nicht sicher, was Sie dagegen tun sollen, müssen möglicherweise nur auf die Fokussierung des ersten Eingabefelds verzichten.
Sam Watkins
7

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

Form.focusFirstElement(document.forms[0]);
John Topley
quelle
5

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();
Marko Dumic
quelle
Ich könnte mich irren, aber diese Schleife hat kein definiertes Verhalten, wenn Formulare [0] keine versteckten Eingaben haben.
xtofl
Genau. Es wird verwendet, um führende versteckte Eingaben zu überspringen. Und es wird unter der Annahme geschrieben, dass das Formular nicht versteckte Felder enthält. Ich hätte es auch mit jQuery machen können (ich werde eine weitere Antwort posten), aber Sie haben nicht erwähnt, dass Sie jQuery einbeziehen möchten.
Marko Dumic
1
@MarkoDumic Warum Speicher verschwenden, wenn Sie eine whileAnweisung verwenden können?
Lucio
3

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>
James Hughes
quelle
1
Eine Sache, die hier berücksichtigt werden muss, ist, dass sie möglicherweise mit Elementen übereinstimmt, die selbst nicht verborgen sind, aber ein Vorfahr ist. Das würde erfordern, das DOM zu sichern und die Sichtbarkeit jedes Vorfahren zu testen, was meiner Meinung nach ein schwerwiegender Overkill für diese Art von Situation ist.
James Hughes
Was ist mit <input type = "text" readonly = "readonly">? Ich denke, Sie sollten Ihrem Code einen solchen Fall hinzufügen. Normalerweise möchten sich die Benutzer nicht auf ein schreibgeschütztes Eingabetextfeld konzentrieren. Sowieso schöner Code und +1 danke!
Marco Demaio
Ungetestet, aber ich habe es mit! Forms [i] [j] .readonly! = Undefined aktualisiert
James Hughes
3

Ich benutze dies:

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

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();
Dave K.
quelle
1

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">
feder
quelle
0

Mit AngularJS:

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

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

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;
                }
            }
        }
    }   
}
thecoolmacdude
quelle
0

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.

cghislai
quelle
0

ohne Abfrage, zB mit normalem Javascript:

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

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

localhostdotdev
quelle