Boîte de dialogue jquery-ui: Définit l’action par défaut d’un bouton de la boîte de dialogue (touche Entrée)

Question

Dans une boîte de dialogue modale jQuery, existe-t-il un moyen de sélectionner un bouton comme action par défaut (action à exécuter lorsque l'utilisateur appuie sur Entrée)?

Exemple de site Web jquery: message modal de la boîte de dialogue jquery

Dans l'exemple ci-dessus, la boîte de dialogue se ferme lorsque l'utilisateur appuie sur Echap. Je voudrais que l'action du bouton "Ok" soit appelée lorsque l'utilisateur appuie sur la touche Entrée.

Answer 1

Dans la fonction d'ouverture de votre boîte de dialogue, vous pouvez mettre au point le bouton:

 $("#myDialog").dialog({
    open: function() {
      $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
    }
});
 

Changez le :eq(0) si c'est à un index différent, ou trouvez par nom, etc.

Answer 2

J'aime celui-ci (ça marche pour moi), ce qui laisse le focus là où je voulais être (une zone de texte)

     $("#logonDialog").keydown(function (event) {
        if (event.keyCode == 13) {
            $(this).parent()
                   .find("button:eq(0)").trigger("click");
            return false;
        }
    });
 

Toutefois, cela ne fonctionne que pour un bouton (bouton OK). Si nécessaire, ': eq (n)' peut être configuré pour sélectionner un autre bouton.

Remarque: j'ai ajouté une nouvelle ligne renvoyant la valeur false pour empêcher la formation d'événements lorsque la touche Entrée est gérée. J'espère que cela aide mieux qu'avant.

Answer 3

essayez de cette façon:

 $("#myDialog").dialog({
    open: function() {
         $(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus(); 
    }
});
 

Answer 4

Cette autre question devrait vous amener où vous voulez:

 $('#DialogTag').keyup(function(e) {
    if (e.keyCode == 13) {
        //Close dialog and/or submit here...
    }
});
 

Answer 5

Une autre option permettant de mieux contrôler tous les boutons de la boîte de dialogue consiste à les ajouter sous forme de tableau de boutons. Ensuite, dans l’ événement open, vous pouvez obtenir les boutons par identifiant et faire ce que vous voulez (y compris définir le focus )

 $('#myDialog').dialog({
    buttons: [  
                {
                    id: "btnCancel",
                    text: "Cancel",
                    click: function(){
                        $(this).dialog('close');
                    }
                },
                {
                    id: "btnOne",
                    text: "Print One",
                    click: function () {
                        SomeFunction(1);
                    }
                },
                {
                    id: "btnTwo",
                    text: "Print Two",
                    click: function(){
                        SomeFunction(0);
                    }
                }
            ],
    open: function () {
        if ($('#hiddenBool').val() != 'True') {
            $('#btnOne').hide();
        }
        $("#btnTwo").focus();
    }
});