web-dev-qa-db-de.com

Wie kann man sich beim Laden der Seite mit jQuery auf ein Formulareingabefeld konzentrieren?

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

javascriptjqueryhtmlfocus
212
chris

Setzen Sie den Fokus auf das erste Textfeld:

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

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

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

Oder Sie können die ID verwenden:

$("#someTextBox").focus();
333
DOK

Sie können dazu HTML5 autofocus verwenden. Sie benötigen kein jQuery oder anderes JavaScript. 

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

Beachten Sie, dass dies nicht für IE9 und niedriger funktioniert.

74
Andrew Liu

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>
26
Pandincus

Warum verwendet jeder jQuery für etwas so einfaches? 

<body OnLoad="document.myform.mytextfield.focus();">
19
TD_Nijboer

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

Sie können dies überprüfen, indem Sie onfocus-Attribute in jedes Ihrer <input>-Elemente einfügen, um aufzuzeichnen, ob sich der Benutzer bereits auf ein Formularfeld konzentriert hat und den Fokus dann nicht stehlen, wenn er

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">
18
Tim Down

HTML:

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

jQuery:

$("#search").focus();
11
brendan

Entschuldigen Sie, dass Sie eine alte Frage gestellt haben. Ich habe das über Google gefunden.

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

z.B.

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

Dies fokussiert die erste Eingabe oder den Textbereich, den es findet, und Sie können natürlich auch andere Selektoren zum Mix hinzufügen. Hnady, wenn Sie sich nicht sicher sein können, ob ein bestimmter Elementtyp an erster Stelle steht oder wenn Sie etwas allgemeines/wiederverwendbares Element wünschen.

8
Andrew Calder

Das nutze ich am liebsten:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
5
SynD

nach Eingabe platzieren

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

Der einfache und einfachste Weg, dies zu erreichen

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

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

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