$ .focus () non funziona

L' ultimo esempio deglifocus() stati della documentazione di jQuery

$('#id').focus()

dovrebbe rendere l'input focalizzato (attivo). Non riesco a farlo funzionare.

Anche nella console di questo sito, lo sto provando per la casella di ricerca

$('input[name="q"]').focus()

e non ricevo niente. Qualche idea?

In realtà l'esempio che hai dato per concentrarti su questo sito funziona bene, purché non ti concentri sulla console. Il motivo per cui non funziona è semplicemente perché non sta rubando il focus dalla console di sviluppo. Se esegui il seguente codice nella tua console e fai clic rapidamente nella finestra del browser dopo, vedrai che focalizza la casella di ricerca:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Per quanto riguarda l'altro, l'unica cosa che mi ha dato problemi in passato è l'ordine degli eventi. Non puoi chiamare focus () su un elemento che non è stato associato al DOM. L'elemento che stai tentando di mettere a fuoco è già stato collegato al DOM?

Ho trovato una soluzione altrove in rete ...

$('#id').focus();

non ha funzionato.

$('#id').get(0).focus();

ha funzionato.

Alcune delle risposte qui suggeriscono di utilizzare setTimeoutper ritardare il processo di concentrazione sull'elemento target. Uno di questi menziona che l'obiettivo è all'interno di una finestra di dialogo modale. Non posso commentare ulteriormente la correttezza della setTimeoutsoluzione senza conoscere i dettagli specifici di dove è stata utilizzata. Tuttavia, ho pensato che avrei dovuto fornire una risposta qui per aiutare le persone che si imbattono in questo thread proprio come ho fatto io

Il semplice fatto è che non puoi concentrarti su un elemento che non è ancora visibile . Se riscontri questo problema, assicurati che l'obiettivo sia effettivamente visibile quando viene effettuato il tentativo di mettere a fuoco. Nel mio caso stavo facendo qualcosa di simile

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Questo non ha funzionato. Ho solo capito che cosa stava succedendo quando ho eseguito $ ( '# elementID'). Messa a fuoco () `dalla console, che ha fatto il lavoro. La differenza: nel mio codice sopra l'obiettivo non si ha la certezza che l'obiettivo sarà visibile poiché l'animazione potrebbe non essere completa . E qui sta l'indizio

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

funziona esattamente come previsto. Anch'io avevo inizialmente messo una setTimeoutsoluzione e ha funzionato anche. Tuttavia, un timeout scelto arbitrariamente è destinato a interrompere la soluzione prima o poi a seconda di quanto lentamente il dispositivo host procede nel processo per garantire che l'elemento di destinazione sia visibile.

se usi bootstrap + modal, questo ha funzionato per me:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Nel caso in cui qualcun altro si imbattesse in questa domanda e avesse la stessa situazione che avevo - stavo cercando di impostare la messa a fuoco dopo aver fatto clic su un altro elemento, ma la messa a fuoco non sembrava funzionare. Si scopre che avevo solo bisogno di un e.preventDefault();- ecco un esempio:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Questo ha aiutato:

Se si chiama HTMLElement.focus () da un gestore eventi mousedown, è necessario chiamare event.preventDefault () per evitare che lo stato attivo lasci HTMLElement. Fonte: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Mi rendo conto che questo è vecchio, ma l'ho trovato oggi. Nessuna delle risposte ha funzionato per me, quello che ho scoperto che ha funzionato era setTimeout. Volevo che il mio focus fosse posto sull'input archiviato di un modale, usando setTimeout funzionava. Spero che questo ti aiuti!

Ho avuto anche questo problema. La soluzione che ha funzionato nel mio caso è stata l'utilizzo della proprietà tabindex sull'elemento HTML.

Stavo usando ng-repeatalcuni elementi li all'interno di un elenco e non ero in grado di mettere a fuoco il primo li usando .focus (), quindi ho semplicemente aggiunto l'attributo tabindex a ciascun li durante il ciclo.

così ora <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

Quel +1 era indice inizia da 0. Assicurati anche che l'elemento sia presente in DOM prima di chiamare la funzione .focus ()

Spero che aiuti.

Per quelli con il problema di non funzionare perché hai usato "$ (element) .show ()". L'ho risolto nel modo seguente:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Quindi non hai bisogno di un timer, verrà eseguito dopo che il metodo show è stato completato.

Aggiungi un ritardo prima di focus (). 200 ms sono sufficienti

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Ho avuto di nuovo questo problema proprio ora, e ci crediate o no, tutto quello che dovevo fare era chiudere gli strumenti di sviluppo. Apparentemente la scheda Console ha la priorità sul contenuto della pagina.

Assicurati che l'elemento e i suoi genitori siano visibili. Non è possibile utilizzare lo stato attivo su elementi nascosti

SOLUZIONE AGGIUNTIVA Aveva lo stesso problema in cui focus () non sembrava funzionare ma alla fine si è scoperto che ciò che era necessario era scorrere nella posizione corretta:

• https://stackoverflow.com/a/43342974/1335717

Per il mio caso ho dovuto specificare un indice di tabulazione ( -1se focalizzabile solo tramite script)

<div tabindex='-1'>
<!-- ... -->
</div>