Wie kann ich mich beim Laden einer Seite mit jQuery auf ein Texteingabefeld für Formulare konzentrieren?

238

Dies ist wahrscheinlich sehr einfach, aber könnte mir jemand sagen, wie der Cursor beim Laden der Seite auf einem Textfeld blinkt?

javascript jquery html focus chris
quelle
96
Einfache Fragen machen uns hier nichts aus.
DOK
Überprüfen Sie die Antwort von
Sohail Arif

Antworten:

379

Setzen Sie den Fokus auf das erste Textfeld:

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

Dies macht auch das erste Textfeld, aber Sie können die [0] in einen anderen Index ändern:

$('input[@type="text"]')[0].focus();

Oder Sie können die ID verwenden:

$("#someTextBox").focus();
DOK
quelle
2
Wenn Sie einen Dialog verwenden, lesen
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... arbeitete für mich
Rav
91

Sie können hierfür HTML5 verwendenautofocus . Sie benötigen weder jQuery noch anderes JavaScript.

<input type="text" name="some_field" autofocus>

Beachten Sie, dass dies unter IE9 und niedriger nicht funktioniert.

Andrew Liu
quelle
Autofokus funktioniert auch nicht in IE11 stackoverflow.com/questions/34068302/…
BA TabNabber
Dies funktioniert für mein Szenario, aber die ausgewählte Antwort hat aus irgendeinem Grund nicht funktioniert.
Vishnu YS
27

Sicher:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>
Pandincus
quelle
2
Ich empfehle, das Skript nach dem HTML-Element zu bringen.
Ali Sheikhpour
1
Das @ AliSheikhpour-Skript befindet sich im dom ready-Wrapper, sodass es keine Rolle spielt, dass es sich vor dem HTML-Element befindet, aber es sollte sowieso nicht im Kopf stehen.
Popnoodles
22

Warum verwendet jeder jQuery für so etwas Einfaches? 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
quelle
15
Weil die Frage als jQuery markiert ist.
Adarsh ​​Madrecha
18

Denken Sie an Ihre Benutzeroberfläche, bevor Sie dies tun. Ich gehe davon aus (obwohl keine der Antworten dies gesagt hat), dass Sie dies tun, wenn das Dokument mit der ready()Funktion von jQuery geladen wird . Wenn sich ein Benutzer bereits vor dem Laden des Dokuments auf ein anderes Element konzentriert hat (was durchaus möglich ist), ist es äußerst ärgerlich, wenn ihm der Fokus gestohlen wird.

Sie können dies überprüfen, indem Sie onfocusjedem Ihrer <input>Elemente Attribute hinzufügen , um aufzuzeichnen, ob sich der Benutzer bereits auf ein Formularfeld konzentriert hat, und dann den Fokus nicht zu stehlen, wenn er Folgendes hat:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">
Tim Down
quelle
2
Ihre Perspektive ist nicht nur technisch korrekt, sondern Ihre Überlegung für die bestmögliche UX ist exquisit. Bravo!
Folusho Oladipo
12

HTML:

  <input id="search" size="10" />

jQuery:

$("#search").focus();
brendan
quelle
1
Wenn Sie HTML5 verwenden, fügen Sie autofocusdem Eingabeelement einfach ein Attribut hinzu .
Adarsh ​​Madrecha
Wie wird dieses Attribut verwendet und wird es zum fokussierten Element, sobald die übergeordnete Form angezeigt wird?
Khom Nazid
8

Tut mir leid, dass ich eine alte Frage gestellt habe. Ich habe das über Google gefunden.

Es ist auch erwähnenswert, dass es möglich ist, mehr als einen Selektor zu verwenden, sodass Sie auf jedes Formularelement und nicht nur auf einen bestimmten Typ abzielen können.

z.B.

$('#myform input,#myform textarea').first().focus();

Dadurch wird der erste gefundene Eingabe- oder Textbereich fokussiert, und Sie können natürlich auch andere Selektoren zum Mix hinzufügen. Hnady, wenn Sie nicht sicher sein können, ob ein bestimmter Elementtyp an erster Stelle steht, oder wenn Sie etwas allgemeines / wiederverwendbares wünschen.

Andrew Calder
quelle
Ausgezeichneter Vorschlag @ Andrew.
DOK
6

Folgendes bevorzuge ich:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
quelle
3
Es ist eine schlechte Art, Dinge zu tun, sich auf einen <Eingang> beim Laden von Dokumenten zu konzentrieren. Verwenden Sie einfach das autofocusAttribut von HTML5
OverCoder
3

nach Eingabe platzieren

<script type="text/javascript">document.formname.inputname.focus();</script>
Bill Marquis
quelle
0

Der einfache und einfachste Weg, dies zu erreichen

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});
Muhammad Owais
quelle
0

Die Zeile $('#myTextBox').focus()allein setzt den Cursor nicht in das Textfeld, sondern verwendet:

$('#myTextBox:text:visible:first').focus();
David Sopko
quelle