web-dev-qa-db-fra.com

Quelles sont les raisons pour lesquelles jquery .focus () ne fonctionne pas?

Certaines idées sont que ELEMENT_ID.focus () est à l'intérieur de divs qui sont cachés à certains moments. 

Cela devrait être un problème facile à résoudre - mais je me bats :(

*** Le code fonctionne bien - le champ de texte n'est pas centré sur le chargement de la page.

ÉTAPE 1 [Résolu] JAVASCRIPT:

$("#goal-input").focus();

$('#goal-input').keypress(function(event){
 var keycode = (event.keyCode ? event.keyCode : event.which);
  if(keycode == '13') {
etc, etc, etc
}

HTML

<input type="text" id="goal-input" name="goal" />

[ÉTAPE2] JAVASCRIPT:

 if (goal) {
          step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast');

etc, etc

HTML:

  <div id="step-2">
        <div class="notifications">
        </div>
        <input type="text" id="name"   name="name" placeholder="Name" />
               <script type="text/javascript">
              $(function(){
              $("#name").focus();
              });
            </script>

Pourquoi l'étape 2 ne fonctionne-t-elle pas? :(

jqueryfocus
29
dngoo

Vous devez placer le code sous le code HTML ou charger si vous utilisez l'événement de chargement de document:

<input type="text" id="goal-input" name="goal" />
<script type="text/javascript">
$(function(){
    $("#goal-input").focus();
});
</script>

Mettre à jour:

Changer de div ne déclenche pas l'événement de chargement de document puisque tout a déjà été chargé. Vous devez vous concentrer lorsque vous changez de div:

if (goal) {
      step1.fadeOut('fast', function() {
          step1.hide();
          step2.fadeIn('fast', function() {  
              $("#name").focus();
          });
      });
}
15
jgauffin

J'ai eu des problèmes à déclencher le focus sur un élément (une entrée de formulaire) en cours de transition dans la page. J'ai trouvé que c'était réparable en appelant l'événement focus de l'intérieur d'un setTimeout sans délai. Si je comprends bien (par exemple, this answer ), cela retarde la fonction jusqu'à la fin de la file d'attente d'exécution en cours. Dans ce cas, l'événement focus est retardé jusqu'à la fin de la transition.

setTimeout(function(){
    $('#goal-input').focus();
});
33
Nick F

N'oubliez pas qu'un champ de saisie doit d'abord être visible, vous pouvez ensuite le focaliser.

$("#elementid").show();
$("#elementid input[type=text]").focus();
7
n0mad

Essayez quelque chose comme ceci quand vous appliquez le focus de cette façon si l'élément est caché, cela ne produira pas d'erreur:

$("#elementid").filter(':visible').focus();

Il peut être plus logique de rendre l'élément visible, bien que cela nécessite un code spécifique à votre mise en page.

4
Kevin B

J'ai trouvé que focus ne fonctionnait pas lorsqu'on essayait de centrer un élément de texte (tel qu'un avis div), mais fonctionnait quand on se concentrait sur les champs de saisie. 

3
Martin

C'est résolu !!!

setTimeout(function(){
    $("#name").filter(':visible').focus();
}, 500);

Vous pouvez ajuster le temps en conséquence.

0
Mohammed Rishad