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?

— 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

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