Définir le focus sur le champ dans un DIV chargé dynamiquement

StackOverflow https://stackoverflow.com/questions/1433742

  •  07-07-2019
  •  | 
  •  

Question

Quelle est la méthode appropriée pour définir le focus sur un champ spécifique dans un DIV chargé de manière dynamique? 

$("#display").load("?control=msgs"); // loads the HTML into the DIV
$('#display').fadeIn("fast"); // display it
$("tex#header").focus();          // ?? neither that
$("input#header").focus();        // ?? nor that
$('#display', '#header').focus()  // ?? nor that
$("#header").focus();             // ?? nor that works

Le code HTML suivant est récupéré dans l'affichage DIV: 

<div id="display">
<form id="newHeaderForm" class="dataform" action="/" method="post">
    <input id="to" type="hidden" value="22" name="to"/>
    <dl>
        <dt>Header</dt>
        <dd>
            <input id="header" class="large" type="text" name="header" value="" maxlength="128"/>
        </dd>
 </form>
 </div>

Merci beaucoup!

Était-ce utile?

La solution

La fonction load () est une fonction asynchrone. Vous devez définir le focus une fois l'appel load () terminé, c'est-à-dire dans la fonction de rappel de load (), car sinon l'élément auquel vous faites référence par #header n'existe pas encore. Par exemple: 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

J'ai moi-même eu des problèmes même avec cette solution. J'ai donc créé setTimeout dans le rappel et défini le focus dans le délai d'attente pour que l'élément soit réellement créé.

Autres conseils

Avez-vous essayé simplement de sélectionner par ID? 

$("#header").focus();

Étant donné que les identifiants doivent être uniques, il n'est pas nécessaire d'avoir un sélecteur plus spécifique.

Oui, cela se produit lors de la manipulation d’un élément qui n’existe pas encore (quelques contributeurs ici ont également fait valoir un point avec l’ID unique). J'ai rencontré un problème similaire. J'ai également besoin de passer un argument à la fonction manipulant l'élément à rendre prochainement.

La solution cochée ici ne m'a pas aidé. Enfin, j’en ai trouvé un qui fonctionne tout de suite. Et c'est très joli aussi - les fermetures.

Au lieu de: 

$( '#header' ).focus();
or the tempting:
setTimeout( $( '#header' ).focus(), 500 );

Essayez ceci: 

setTimeout( function() { $( '#header' ).focus() }, 500 );

Dans mon code, tester en passant l'argument, cela ne fonctionnait pas, le délai d'attente était ignoré: 

setTimeout( alert( 'Hello, '+name ), 1000 );

Ceci fonctionne, le tic-tac de délai d'attente est écoulé: 

setTimeout( function() { alert( 'Hello, '+name ) }, 1000 );

C’est dommage que les écoles n’en parlent pas.

Les crédits vont à: makemineatriple. com .

J'espère que cela aidera quelqu'un qui vient ici.

Martas 

$("#display").load("?control=msgs", {}, function() { 
  $('#header').focus();
});

J'ai essayé mais ça ne marche pas, donnez-moi plus de conseils pour résoudre ce problème. merci pour votre aide

Si 

$("#header").focus();

ne fonctionne pas, y a-t-il un autre élément sur votre page avec l'identifiant d'en-tête?

Utilisez firebug pour exécuter $ (" # header ") et voir ce qu'il retourne.

Comme l’a fait remarquer Omu, vous devez définir le focus dans une fonction de préparation de document. jQuery le fournit pour vous. Et ne sélectionnez sur un identifiant. Par exemple, si vous avez une page de connexion: 

$(function() { $("#login-user-name").focus(); }); // jQuery rocks!

Ceci s'exécute au chargement de la page. 

<script type="text/javascript">
    $(function () {
        $("#header").focus();
    });
</script>

Les éléments ajoutés dynamiquement doivent être ajoutés au DOM ... clone (). append () les ajoute au DOM ... ce qui permet de les sélectionner via jquery. 

$("#header").attr('tabindex', -1).focus();

$(function (){
    $('body').on('keypress','.sobitie_snses input',function(e){
        if(e.keyCode==13){
            $(this).blur();
            var new_fild =  $(this).clone().val('');
            $(this).parent().append(new_fild);
            $(new_fild).focus();
        }
    });
});

la plupart des erreurs sont dues au fait que vous utilisez un objet incorrect pour définir le prorepty ou la fonction. Utilisez console.log (new_fild); pour voir à quel objet U essayez de définir le prorepty ou la fonction.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top