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

To pewnie bardzo proste, ale czy ktoś mógłby mi powiedzieć, jak sprawić, by kursor migał na polu tekstowym przy wczytaniu strony?

Author: informatik01, 2009-10-20

10 answers

Ustaw fokus na pierwszym polu tekstowym:

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

To również robi pierwsze pole tekstowe, ale można zmienić [0] na inny indeks:

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

Lub możesz użyć ID:

$("#someTextBox").focus();
 318
Author: DOK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-20 00:52:41

Możesz użyć HTML5 autofocus za to. Nie potrzebujesz jQuery ani innego JavaScript.

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

Uwaga to nie zadziała na IE9 i niższych.

 71
Author: Andrew Liu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-01 12:22:47

Jasne:

<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>
 25
Author: Pandincus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-20 00:51:10

Dlaczego wszyscy używają jQuery do czegoś prostego jak to.

<body OnLoad="document.myform.mytextfield.focus();">
 19
Author: TD_Nijboer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-09 09:09:48

Pomyśl o swoim interfejsie użytkownika zanim to zrobisz. Zakładam (choć żadna z odpowiedzi tak nie powiedziała), że będziesz to robił, gdy dokument ładuje się za pomocą funkcji ready() jQuery. Jeśli użytkownik skupił się już na innym elemencie przed załadowaniem dokumentu (co jest całkowicie możliwe), to niezwykle irytujące jest dla niego, że fokus został skradziony.

Możesz to sprawdzić dodając onfocus atrybuty w każdym z elementów <input>, aby zapisać, czy użytkownik skupił się już na polu formularza, a następnie nie ukradł Fokusa, jeśli ma:

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
Author: Tim Down,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-20 08:51:18

HTML:

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

JQuery:

$("#search").focus();
 11
Author: brendan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-20 00:51:18

Przepraszam za stare pytanie. Znalazłem to przez google.

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

Np.

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

Spowoduje to skupienie pierwszego wejścia lub obszaru tekstowego, które znajdzie, i oczywiście możesz dodać inne selektory do mieszanki. Hnady, jeśli nie możesz być pewien, że konkretny typ elementu jest pierwszy, lub jeśli chcesz coś trochę ogólnego / wielokrotnego użytku.

 7
Author: Andrew Calder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-07 21:45:17

To jest to, co wolę używać:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
 5
Author: SynD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-15 16:52:49

Miejsce po wejściu

<script type="text/javascript">document.formname.inputname.focus();</script>
 3
Author: Bill Marquis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-16 01:34:59

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

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});
 0
Author: Muhammad Owais,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-13 06:31:09