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

Question

Gibt es einen einfachen Weg zu setzen Sie den Fokus (Eingabecursor) einer Webseite auf das erste Eingabeelement (Textbox, Dropdown-Liste, ...) beim Laden der Seite ohne die ID des Elements zu kennen ?

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

Answer 1

Sie auch jQuery basierende Methode ausprobieren können:

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

Answer 2

Es gibt eine Zuschreibung auf hier, die von Nutzen sein kann: Set Focus to First Input on Web Page

Answer 3

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

Diese verfeinert werden kann eine Schleife zB mit. nicht bestimmte Arten von Feldern, deaktivierte Felder und so weiter. Besser kann sein, eine Klasse = "Autofokus" zu dem Feld hinzufügen Sie tun wollen konzentrieren, und Schleife über Formulare [i] .elements [j] auf der Suche nach dem Klassennamen.

Jedenfalls: es ist normalerweise keine gute Idee, dies auf jeder Seite zu tun. Wenn Sie eine Eingabe fokussieren, verliert der Benutzer die Fähigkeit, z. Scrolle die Seite von der Tastatur. Wenn dies unerwartet ist, kann dies ärgerlich sein, so dass Sie nur dann Autofokus verwenden, wenn Sie sich ziemlich sicher sind, dass die Verwendung des Formularfelds genau das ist, was der Benutzer tun möchte. dh. wenn du Google bist.

Answer 4

Sie müssen auch versteckte Eingaben überspringen.

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

Answer 5

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

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

Answer 6

diesen Code am Ende Ihrer body Tag Putting wird das erste sichtbare, nicht verborgen konzentrieren aktiviertes Element auf dem Bildschirm automatisch. Es wird die meisten Fälle behandeln, die ich kurzfristig stellen 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> 

Answer 7

Die umfassendste jQuery Ausdruck fand ich Arbeits ist (durch die Hilfe von über here)

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

Answer 8

Obwohl dieses ‚doesn Um die Frage zu beantworten (erfordert ein gemeinsames Skript), könnte es für andere nützlich sein zu wissen, dass HTML5 das Autofokus-Attribut einführt:

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

Dive in to HTML5 hat weitere Informationen.

Answer 9

Dies ruft die erste sichtbare Eingabedatei auf, einschließlich Textfelder und Auswahlfelder. Dies stellt auch sicher, dass sie nicht versteckt, deaktiviert oder nur gelesen werden. Es erlaubt auch ein Ziel-Div, das ich in meiner Software verwende (dh erste Eingabe innerhalb dieses Formulars).

Answer 10

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

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

Answer 11

Ich verwende diese:

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

Answer 12

Mit AngularJS:

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

Answer 13

Dazu gehören Textbereiche und schließt Radiobuttons

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

Answer 14

Für diejenigen, die JSF2 verwenden. 2+ und kann aut nicht passieren ofocus als Attribut ohne Wert zu, verwenden Sie diese:

p:autofocus="true" 

Und es auf den Namespace p hinzuzufügen (auch häufig verwendet, pt. Was immer du magst).

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

Answer 15

Sie sollten client der Lage sein, anstatt für das Anzeigeattribut der Überprüfung zu verwenden, da ein Elternteil versteckt dieses Element werden 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; 
       } 
      } 
     } 
    } 
}