Come concentrarsi su un campo di testo di input del modulo al caricamento della pagina utilizzando jQuery?

238

Questo è probabilmente molto semplice, ma qualcuno potrebbe dirmi come far lampeggiare il cursore su una casella di testo al caricamento della pagina?

— Chris
fonte

96

Non ci occupiamo delle semplici domande qui.

— DOK,

Controlla la risposta di sohail arif sul link seguente: stackoverflow.com/questions/18054459/…

— Sohail Arif

378

Imposta lo stato attivo sul primo campo di testo:

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

Questo fa anche il primo campo di testo, ma puoi cambiare [0] in un altro indice:

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

Oppure puoi usare l'ID:

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

— DOK
fonte

2

Se si utilizza una finestra di dialogo, vedere questa risposta se quanto sopra non funziona stackoverflow.com/a/20629541/966609

— Matt Canty

1

$('input[type="text"]').get(0).focus(); ... ha funzionato per me

— Rav

92

È possibile utilizzare HTML5autofocus per questo. Non hai bisogno di jQuery o di altri JavaScript.

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

Nota che non funzionerà su IE9 e versioni precedenti.

— Andrew Liu
fonte

messa a fuoco automatica non funziona in IE11 sia stackoverflow.com/questions/34068302/...

— BA TabNabber

Questo funziona per il mio scenario, ma la risposta selezionata non ha funzionato per qualche motivo.

— Vishnu YS,

27

Sicuro:

<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
fonte

2

Consiglio di portare lo script dopo l'elemento html.

— Ali Sheikhpour,

1

Lo script @AliSheikhpour è nel wrapper dom ready, quindi non importa che sia prima dell'elemento html, ma non dovrebbe comunque essere in testa.

— Popnoodles,

22

Perché tutti usano jQuery per qualcosa di semplice come questo.

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

— TD_Nijboer
fonte

15

Perché la domanda è taggata come jQuery.

— Adarsh Madrecha,

18

Pensa alla tua interfaccia utente prima di farlo. Suppongo (anche se nessuna delle risposte lo ha detto) che lo farai quando il documento viene caricato utilizzando la ready()funzione di jQuery . Se un utente si è già concentrato su un elemento diverso prima che il documento sia stato caricato (il che è perfettamente possibile), è estremamente irritante per loro che la messa a fuoco venga rubata.

Puoi verificarlo aggiungendo onfocusattributi in ciascuno dei tuoi <input>elementi per registrare se l'utente si è già concentrato su un campo modulo e quindi non rubare lo stato attivo se hanno:

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
fonte

2

La tua prospettiva non è solo tecnicamente corretta, ma la tua considerazione per la migliore UX possibile è squisita. Bravo!

— Folusho Oladipo,

12

HTML:

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

jQuery:

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

— Brendan
fonte

1

se usi html5, aggiungi semplicemente l' autofocusattributo all'elemento input?

— Adarsh Madrecha,

Come viene usato quell'attributo e diventerà l'elemento focalizzato non appena appare la sua forma principale?

— Khom Nazid,

8

Ci scusiamo per aver posto una vecchia domanda. Ho trovato questo tramite Google.

Vale anche la pena notare che è possibile utilizzare più di un selettore, quindi è possibile scegliere come target qualsiasi elemento del modulo e non solo un tipo specifico.

per esempio.

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

Questo focalizzerà il primo input o textarea che trova, e ovviamente puoi anche aggiungere altri selettori nel mix. Hnady se non puoi essere certo che uno specifico tipo di elemento sia il primo, o se vuoi qualcosa di un po 'generale / riutilizzabile.

— Andrew Calder
fonte

Ottimo suggerimento @Andrew.

— DOK

6

Questo è ciò che preferisco usare:

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

— poveilleux
fonte

3

È un brutto modo di fare le cose, concentrarsi su un <input> sul caricamento del documento, basta usare l' autofocusattributo fornito da HTML5

— OverCoder

3

posto dopo input

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

— Bill Marquis
fonte

0

Il modo più semplice e semplice per raggiungere questo obiettivo

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

— Muhammad Owais
fonte

0

La $('#myTextBox').focus()sola riga non posizionerà il cursore nella casella di testo, invece usa:

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

— David Sopko
fonte