$ .focus () ne fonctionne pas

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 le focus de la console de développement. Si vous exécutez le code suivant dans votre console et que vous cliquez ensuite rapidement dans la fenêtre de votre navigateur, vous verrez que la zone de recherche est concentrée:

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

Quant à l’autre, la seule chose qui m’a posé problème 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 vous concentrer a-t-il déjà été attaché au DOM?

J’ai trouvé une solution ailleurs sur le net …

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

n’a pas fonctionné.

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

a travaillé.

Certaines des réponses suggèrent d’utiliser setTimeout pour retarder le processus de mise au point sur l’élément cible. L’un d’eux mentionne que la cible se trouve dans une boîte de dialog modale. Je ne peux pas commenter plus précisément l’exactitude de la solution setTimeout sans connaître les détails spécifiques de l’endroit où elle a été utilisée. Cependant, je pensais que je devrais fournir une réponse ici pour aider les gens qui rencontrent ce fil comme je l’ai fait

Le simple 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 lors de la tentative de mise au point. Dans mon cas, je faisais quelque chose dans ce sens

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

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

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

fonctionne comme prévu. Moi aussi, j’avais initialement mis en place une solution setTimeout et cela fonctionnait aussi. Toutefois, une temporisation choisie arbitrairement est destinée à casser la solution tôt ou tard, en fonction de la lenteur avec laquelle le périphérique hôte s’assure que l’élément cible est visible.

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 se trouve que je voulais juste 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 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 attention soit placée sur l’entrée d’un modal, en utilisant le setTimeout travaillé. J’espère que cela t’aides!

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

J’utilisais ng-repeat pour certains éléments li dans une liste et je ne pouvais pas mettre le focus sur le premier li en utilisant .focus (), alors j’ai simplement ajouté l’atsortingbut tabindex à chaque li pendant la boucle.

so now

Ce +1 a été indexé à partir de 0. Assurez-vous également que l’élément est présent dans DOM avant d’appeler la fonction .focus ()

J’espère que ça aide.

Pour ceux qui ont le problème de ne pas travailler car vous avez utilisé “$ (element) .show ()”. Je l’ai résolu de la façon suivante:

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

Donc, vous n’avez pas besoin d’un minuteur, il s’exécutera une fois la méthode show terminée.

SOLUTION ADDITIONNELLE Avait le même problème où focus () ne semblait pas fonctionner, mais il s’est avéré que ce dont on avait besoin était de faire défiler la position:

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