it-swarm.com.de

Wie kann der Fokus auf das erste Eingabeelement in einem HTML-Formular gesetzt werden, unabhängig von der ID?

Gibt es eine einfache Möglichkeit, den Fokus (Eingabecursor) einer Webseite auf dem ersten Eingabeelement einzustellen (Textfeld, Dropdownliste, ...) beim Laden der Seite, ohne die ID kennen zu müssen das Element?

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

81
splattne

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

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

Obwohl dies die Frage nicht beantwortet (ein allgemeines Skript erforderlich), 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>

Eintauchen in HTML5 enthält mehr Informationen.

125
Jacob Stanley
document.forms[0].elements[0].focus();

Dies kann unter Verwendung einer Schleife verfeinert werden, um z. Bestimmte Feldtypen, deaktivierte Felder usw. nicht fokussieren. Besser kann es sein, dem Feld, in dem Sie do fokussieren möchten, eine Klasse = "Autofokus" hinzuzufügen und die Formulare [i] .elements [j] nach diesem Klassennamen zu durchsuchen.

Wie auch immer: Es ist normalerweise keine 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 den Autofokus also nur dann verwenden, wenn Sie ziemlich sicher sind, dass das Formularfeld genau das ist, was der Benutzer tun möchte. dh. wenn Sie Google sind.

27
bobince

Der umfassendste jQuery-Ausdruck, den ich gefunden habe, ist (mit Hilfe von over here ).

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

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

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

Es gibt hier eine Beschreibung, die nützlich sein kann: Fokus auf erste Eingabe auf der Webseite setzen

6
Galwegian

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();
5
Marko Dumic

Ich habe viele der oben genannten Antworten ausprobiert und sie funktionierten nicht. Fand dieses hier: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Vielen Dank, Kolodvor. 

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

Wenn Sie diesen Code am Ende Ihres body-Tags einfügen, wird das erste sichtbare, nicht ausgeblendete aktivierte Element automatisch auf dem Bildschirm angezeigt. 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>
3
James Hughes

Dadurch wird die erste sichtbare gemeinsame Eingabe einschließlich Textbereichen und Auswahlfeldern abgerufen. Dies stellt auch sicher, dass sie nicht versteckt, deaktiviert oder schreibgeschützt sind. Es erlaubt 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();
2
Dave K

Ich benutze das:

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

Für diejenigen, die JSF2.2 + verwenden und den Autofokus nicht ohne Wert als Attribut übergeben können, verwenden Sie Folgendes:

 p:autofocus="true"

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

<html ... xmlns:p="http://Java.Sun.com/jsf/passthrough">
1
feder

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

Verwenden Sie ohne Fremdanbieter-Bibliotheken 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, verborgene/deaktivierte Tags wie in anderen Antworten usw. ausschließen.

0
cghislai

Mit AngularJS:

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

ohne Abfrage, z.B. mit normalem Javascript:

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

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

0
localhostdotdev

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

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