$ .focus () ne fonctionne pas

Le dernier exemple desfocus() états de documentation de jQuery

$('#id').focus()

devrait rendre l'entrée focalisée (active). Je n'arrive pas à faire fonctionner ça.

Même dans la console de ce site, je l'essaye pour le champ de recherche

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

et je n'obtiens rien. Des idées?

En fait, l'exemple que vous avez donné pour vous concentrer sur ce site fonctionne très bien, tant que vous n'êtes pas concentré sur la console. La raison pour laquelle cela ne fonctionne pas est simplement parce que cela ne vole pas l'attention de la console de développement. Si vous exécutez le code suivant dans votre console, puis cliquez rapidement dans la fenêtre de votre navigateur après, vous le verrez se concentrer sur la zone de recherche:

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

Quant à votre autre, la seule chose qui m'a posé des problèmes dans le passé, c'est l'ordre des événements. Vous ne pouvez pas appeler focus () sur un élément qui n'a pas été attaché au DOM. L'élément que vous essayez de focaliser a-t-il déjà été attaché au DOM?

J'ai trouvé une solution ailleurs sur le net ...

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

n'a pas marché.

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

a fonctionné.

Certaines des réponses ici suggèrent d'utiliser setTimeoutpour retarder le processus de focalisation sur l'élément cible. L'un d'eux mentionne que la cible se trouve dans une boîte de dialogue modale. Je ne peux pas commenter davantage l'exactitude de la setTimeoutsolution sans connaître les détails précis de l'endroit où elle a été utilisée. Cependant, j'ai pensé que je devrais fournir une réponse ici pour aider les personnes qui se heurtent à ce fil comme je l'ai fait

Le fait est que vous ne pouvez pas vous concentrer sur un élément qui n’est pas encore visible . Si vous rencontrez ce problème, assurez-vous que la cible est réellement visible lorsque la tentative de mise au point est effectuée. Dans mon cas, je faisais quelque chose dans ce sens

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

Cela n'a pas fonctionné. Je n'ai réalisé ce qui se passait que lorsque j'ai exécuté $ ('# elementid'). Focus () `depuis la console qui a fonctionné. La différence - dans mon code au-dessus de la cible, il n'y a aucune certitude que la cible sera effectivement visible car l'animation peut ne pas être complète . Et là se trouve l'indice

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

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

fonctionne comme prévu. J'avais moi aussi initialement mis en place une setTimeoutsolution et cela fonctionnait aussi. Cependant, un délai d'expiration choisi arbitrairement est lié à interrompre la solution tôt ou tard en fonction de la lenteur avec laquelle le périphérique hôte procède au processus de vérification de la visibilité de l'élément cible.

si vous utilisez bootstrap + modal, cela a fonctionné pour moi:

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

Juste au cas où quelqu'un d'autre trébucherait sur cette question et aurait la même situation que moi - j'essayais de définir le focus après avoir cliqué sur un autre élément, mais le focus ne semblait pas fonctionner. Il s'avère que j'avais juste besoin d'un e.preventDefault();- voici un exemple:

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

Cela a aidé:

Si vous appelez HTMLElement.focus () à partir d'un gestionnaire d'événements mousedown, vous devez appeler event.preventDefault () pour empêcher le focus de quitter le HTMLElement. Source: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus

Je me rends compte que c'est vieux, mais je l'ai rencontré aujourd'hui. Aucune des réponses n'a fonctionné pour moi, ce que j'ai trouvé qui a fonctionné était setTimeout. Je voulais que mon focus soit placé sur le fichier d'entrée d'un modal, en utilisant le setTimeout fonctionné. J'espère que cela t'aides!

J'ai aussi eu ce problème. La solution qui a fonctionné dans mon cas utilisait la propriété tabindex sur l'élément HTML.

J'utilisais ng-repeatpour certains éléments li dans une liste et je n'ai pas pu mettre le focus sur le premier li en utilisant .focus (), j'ai donc simplement ajouté l'attribut tabindex à chaque li pendant la boucle.

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

Ce +1 était l'index commence à 0. Assurez-vous également que l'élément est présent dans le DOM avant d'appeler la fonction .focus ()

J'espère que ça aide.

Pour ceux qui ont le problème de ne pas fonctionner parce que vous avez utilisé "$ (element) .show ()". Je l'ai résolu de la manière suivante:

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

Vous n'avez donc pas besoin d'une minuterie, elle s'exécutera une fois la méthode show terminée.

Ajoutez un délai avant focus (). 200 ms suffisent

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

J'avais à nouveau ce problème, et croyez-le ou non, tout ce que j'avais à faire était de fermer les outils de développement. Apparemment, l'onglet Console a la priorité sur le contenu de la page.

Assurez-vous que l'élément et ses parents sont visibles. Vous ne pouvez pas utiliser le focus sur les éléments masqués

SOLUTION SUPPLÉMENTAIRE J'ai eu le même problème où focus () ne semblait pas fonctionner, mais il s'est finalement avéré que ce qui était nécessaire était de défiler jusqu'à la bonne position:

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

Pour mon cas, j'ai dû spécifier un index d'onglet ( -1si seulement focusable via un script)

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