web-dev-qa-db-fra.com

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

Quelle est la méthode appropriée pour définir le focus sur un champ spécifique dans une DIV chargée dynamiquement?

$("#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 la variable DIV display:

<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!

jqueryhtmlfocussetfocus
41
MrG

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'avais moi-même des problèmes avec cette solution, alors j'ai 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éé.

57
Jan Willem B

Avez-vous essayé simplement en sélectionnant par ID?

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

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

12
Paul Suart

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'identifiant 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 );

Essaye ça:

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

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

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

Cela fonctionne, le délai d'attente est le suivant:

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

C'est nul que les écoles ne le mentionnent pas. 

Les crédits vont à: makemineatriple.com .

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

Martas

8
Arta

Si

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

ne fonctionne pas alors y at-il un autre élément sur votre page avec l'id d'en-tête?

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

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

j'ai essayé mais cela ne fonctionne pas, donnez-moi s'il vous plaît plus de conseils pour résoudre ce problème. Merci de votre aide

3
xman

Comme Omu l'a souligné, 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!
2
Per Lindberg

Cela fonctionne au chargement de la page.

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

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.

1
BCnuckles
$(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.

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