Jak skupić się na polu tekstowym formularza przy ładowaniu strony za pomocą jQuery?

238

Jest to prawdopodobnie bardzo proste, ale czy ktoś mógłby mi powiedzieć, jak sprawić, by kursor migał w polu tekstowym przy ładowaniu strony?

javascript jquery html focus Chris
źródło
96
Nie mamy tutaj na myśli prostych pytań.
DOK
Sprawdź odpowiedź z Sohail arif na poniższym linku: stackoverflow.com/questions/18054459/…
Sohail Arif

Odpowiedzi:

378

Ustaw fokus na pierwszym polu tekstowym:

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

Robi to również pierwsze pole tekstowe, ale możesz zmienić [0] na inny indeks:

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

Lub możesz użyć identyfikatora:

$("#someTextBox").focus();
DOK
źródło
2
Jeśli używasz okna dialogowego, zapoznaj się z tą odpowiedzią, jeśli powyższe nie działa stackoverflow.com/a/20629541/966609
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... pracował dla mnie
Rav
92

Możesz do tego użyć HTML5autofocus . Nie potrzebujesz jQuery ani innego JavaScript.

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

Uwaga: to nie będzie działać na IE9 i niższych wersjach.

Andrew Liu
źródło
autofocus nie działa w IE11 ani stackoverflow.com/questions/34068302/...
BA TabNabber
Działa to w moim scenariuszu, ale z jakiegoś powodu wybrana odpowiedź nie.
Visnu YS
27

Pewnie:

<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
źródło
2
Polecam umieszczenie skryptu za elementem HTML.
Ali Sheikhpour,
1
Skrypt @AliSheikhpour znajduje się w opakowaniu dom ready, więc nie ma znaczenia, że ​​znajduje się przed elementem HTML, ale i tak nie powinien być na czele.
Popnoodles,
22

Dlaczego wszyscy używają jQuery do czegoś tak prostego? 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
źródło
15
Ponieważ pytanie jest oznaczone jako jQuery.
Adarsh ​​Madrecha
18

Zanim to zrobisz, pomyśl o interfejsie użytkownika. Zakładam (choć żadna odpowiedź nie powiedziała), że zrobisz to, gdy dokument zostanie załadowany przy użyciu ready()funkcji jQuery . Jeśli użytkownik skupił się już na innym elemencie przed załadowaniem dokumentu (co jest całkowicie możliwe), niezwykle denerwujące jest dla niego skradzienie fokusa.

Możesz to sprawdzić, dodając onfocusatrybuty do każdego <input>elementu, aby zarejestrować, czy użytkownik już skupił się na polu formularza, a następnie nie kradnąc fokusa, jeśli:

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
źródło
2
Twoja perspektywa jest nie tylko technicznie poprawna, ale również twoje rozważania dotyczące najlepszego możliwego UX są znakomite. Brawo!
Folusho Oladipo
12

HTML:

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

jQuery:

$("#search").focus();
brendan
źródło
1
jeśli używasz HTML5, po prostu dodaj autofocusatrybut do elementu wejściowego?
Adarsh ​​Madrecha
Jak ten atrybut jest używany i czy stanie się elementem skupionym, gdy tylko pojawi się jego forma nadrzędna?
Khom Nazid
8

Przepraszam, że wpadłem na stare pytanie. Znalazłem to przez Google.

Warto również zauważyć, że można użyć więcej niż jednego selektora, dzięki czemu można kierować na dowolny element formularza, a nie tylko jeden określony typ.

na przykład.

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

Spowoduje to skupienie pierwszego znalezionego tekstu lub obszaru tekstowego i oczywiście możesz dodać także inne selektory do miksu. Hnady, jeśli nie możesz być pewien, że określony typ elementu jest pierwszy, lub jeśli chcesz czegoś nieco ogólnego / wielokrotnego użytku.

Andrew Calder
źródło
Doskonała sugestia @Andrew.
DOK
6

Tego wolę używać:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
źródło
3
To zły sposób na robienie rzeczy, aby skupić się na <wejściu> przy ładowaniu dokumentów, wystarczy użyć autofocusatrybutu dostarczonego przez HTML5
OverCoder
3

miejsce po wejściu

<script type="text/javascript">document.formname.inputname.focus();</script>
Bill Marquis
źródło
0

Najprostszy i najłatwiejszy sposób na osiągnięcie tego

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

Sama linia $('#myTextBox').focus()nie umieści kursora w polu tekstowym, zamiast tego użyj:

$('#myTextBox:text:visible:first').focus();
David Sopko
źródło