$ .focus () no funciona

El último ejemplo de losfocus() estados de documentación de jQuery

$('#id').focus()

debe hacer la entrada enfocada (activa). Parece que no puedo hacer que esto funcione.

Incluso en la consola de este sitio, lo intento para el cuadro de búsqueda

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

Y no consigo nada. ¿Algunas ideas?

En realidad, el ejemplo que diste para enfocarte en este sitio funciona bien, siempre y cuando no estés enfocado en la consola. La razón por la que no funciona es simplemente porque no está robando el foco de la consola de desarrollo. Si ejecuta el siguiente código en su consola y luego hace clic rápidamente en la ventana de su navegador, verá que enfoca el cuadro de búsqueda:

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

En cuanto al otro, lo único que me ha causado problemas en el pasado es el orden de los eventos. No puede llamar a focus () en un elemento que no se ha adjuntado al DOM. ¿El elemento que está tratando de enfocar ya se ha adjuntado al DOM?

Encontró una solución en otra parte de la red ...

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

no funcionó.

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

funcionó

Algunas de las respuestas aquí sugieren usar setTimeoutpara retrasar el proceso de enfocarse en el elemento objetivo. Uno de ellos menciona que el objetivo está dentro de un diálogo modal. No puedo comentar más sobre la corrección de la setTimeoutsolución sin conocer los detalles específicos de dónde se utilizó. Sin embargo, pensé que debería proporcionar una respuesta aquí para ayudar a las personas que se encuentran con este hilo tal como lo hice yo

El simple hecho del asunto es que no puede enfocarse en un elemento que aún no es visible . Si se encuentra con este problema, asegúrese de que el objetivo sea realmente visible cuando se haga el intento de enfocarlo. En mi propio caso estaba haciendo algo en este sentido

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

Esto no funcionó. Sólo me di cuenta de lo que estaba pasando cuando ejecuté $ ( '# elementID'). Enfoque () `de la consola, que hizo el trabajo. La diferencia: en mi código sobre el objetivo no hay certeza de que el objetivo sea visible ya que la animación puede no estar completa . Y ahí yace la pista

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

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

Funciona tal como se esperaba. Yo también había puesto inicialmente una setTimeoutsolución y también funcionó. Sin embargo, un tiempo de espera elegido arbitrariamente romperá la solución tarde o temprano, dependiendo de la lentitud del proceso del dispositivo host para garantizar que el elemento objetivo sea visible.

si usa bootstrap + modal, esto funcionó para mí:

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

En caso de que alguien más se encuentre con esta pregunta y tenga la misma situación que yo, estaba tratando de establecer el enfoque después de hacer clic en otro elemento, pero el enfoque no parecía funcionar. Resulta que solo necesitaba un e.preventDefault();- aquí hay un ejemplo:

$('#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();
});

Esto ayudó a:

Si llama a HTMLElement.focus () desde un controlador de eventos de mousedown, debe llamar a event.preventDefault () para evitar que el foco salga de HTMLElement. Fuente: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Me doy cuenta de que esto es viejo, pero lo encontré hoy. Ninguna de las respuestas funcionó para mí, lo que sí encontré que funcionó fue setTimeout. Quería que mi atención se centrara en la entrada archivada de un modal, usando el setTimeout trabajado. ¡Espero que esto ayude!

Yo también tuve este problema. La solución que funcionó en mi caso fue usar la propiedad tabindex en el elemento HTML.

Estaba usando ng-repeatalgunos elementos li dentro de una lista y no pude enfocar la primera li usando .focus (), así que simplemente agregué el atributo tabindex a cada li durante el ciclo.

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

Que +1 era índice comienza desde 0. También asegúrese de que el elemento esté presente en DOM antes de llamar a la función .focus ()

Espero que esto ayude.

Para aquellos con el problema de no funcionar porque usaste "$ (element) .show ()". Lo resolví de la siguiente manera:

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

Por lo tanto, no necesita un temporizador, se ejecutará después de que se complete el método show.

Agregue un retraso antes del foco (). 200 ms es suficiente

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);
}

Tuve este problema nuevamente en este momento, y lo creas o no, todo lo que tuve que hacer fue cerrar las herramientas del desarrollador. Aparentemente, la pestaña Consola tiene la prioridad de enfoque sobre el contenido de la página.

Asegúrese de que el elemento y sus padres sean visibles. No puedes usar el foco en elementos ocultos

SOLUCIÓN ADICIONAL Tuve el mismo problema donde focus () no parecía funcionar, pero finalmente resultó que lo que se necesitaba era desplazarse a la posición correcta:

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

Para mi caso, tuve que especificar un índice de pestaña ( -1si solo se puede enfocar a través de un script)

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