$.focus() ne fonctionne pas

Question

Le site Dernier exemple de l'utilisation de jQuery focus() documentation États

$('#id').focus()

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

Même dans la console de ce site, je l'essaie pour la boîte de recherche.

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

et je n'obtiens rien. Vous avez une idée ?

Answer 1

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 qu'il 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 rapidement dans la fenêtre de votre navigateur après, vous verrez qu'il focalise la boîte de recherche :

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

Pour ce qui est de votre autre question, la seule chose qui m'a posé problème dans le passé 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 mettre en avant a-t-il déjà été attaché au DOM ?

Answer 2

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

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

n'a pas fonctionné.

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

a fonctionné.

Answer 3

Certaines des réponses suggèrent d'utiliser setTimeout pour retarder le processus de focalisation sur l'élément cible. L'un d'eux mentionne que la cible se trouve à l'intérieur d'un dialogue modal. Je ne peux pas faire de commentaires supplémentaires sur l'exactitude de la setTimeout sans connaître les détails spécifiques de l'endroit où il a été utilisé. Cependant, j'ai pensé que je devais fournir une réponse ici pour aider les personnes qui rencontrent ce fil de discussion 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 s'assurer que la cible est réellement visible lorsque la tentative de mise au point est faite. Dans mon cas, je faisais quelque chose de ce type

$('#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 fait travail. La différence - dans mon code au-dessus de la cible, il n'y a aucune certitude que la cible sera visible puisque l'animation peut ne pas l'être. complet . Et c'est là que se trouve l'indice

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

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

fonctionne comme prévu. Moi aussi, j'avais initialement mis un setTimeout et cela a aussi fonctionné. Toutefois, un délai d'attente choisi arbitrairement est susceptible de 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.

Answer 4

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

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

Answer 5

Au cas où quelqu'un d'autre tomberait sur cette question et se trouverait dans 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'est avéré que j'avais simplement 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énement de type 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