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)
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. J'aimerais que le bouton "Ok" soit appelé lorsque l'utilisateur appuie sur Entrée.
Dans la fonction d'ouverture de votre boîte de dialogue, vous pouvez centrer le bouton:
$("#myDialog").dialog({
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
Modifiez la :eq(0) si elle se trouve à un autre index, ou recherchez-la par son nom, etc.
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 == $.ui.keyCode.ENTER) {
$(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 propagation d'événements lorsque la touche Entrée est gérée. J'espère que cela aide mieux qu'avant.
essayez de cette façon:
$("#myDialog").dialog({
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
});
Cette autre question de stackoverflow devrait vous mener où vous voulez:
$('#DialogTag').keyup(function(e) {
if (e.keyCode == 13) {
//Close dialog and/or submit here...
}
});
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 ID 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();
}
});
Une légère variation pour utiliser le nom des boutons comme sélecteur. La lecture est un peu meilleure mais la duplication est évidente avec la chaîne de texte du bouton. Refactor au goût.
$("#confirm-dialog").dialog({
buttons: {
"Cancel" : function(){},
"OK" : function(){}
},
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus();
}
});
Le moyen le plus simple consiste à utiliser l'action submit sur un formulaire de la boîte de dialogue, toutefois:
- Je ne voulais pas demander un formulaire dans la boîte de dialogue (plusieurs navigateurs traitent la touche Entrée différemment, et certains ne font pas toujours une soumission à l'entrée).
- Je voulais que cela fonctionne si l'utilisateur clique dans le volet titre ou le volet bouton avant d'appuyer sur Entrée.
- Je voulais faire une méthode de bibliothèque que je peux utiliser pour TOUT dialogue JQueryUI.
La société pour laquelle je travaille est 'EBL' et j'évite une portée globale ... d'où le préfixe des fonctions ci-dessous:
EBL.onUiDialogOpen = function (event, ui, hideX, actionFirstButtonOnEnterKey) {
if (hideX) {
// There is no option to hide the 'X' so override.
$(".ui-dialog-titlebar-close").hide();
}
if (actionFirstButtonOnEnterKey) {
/* (event.target) will give the div that will become the content
of a UI dialog, once div is 'opened' is it surrounded by a
parent div that contains title and buttonpane divs as well as
content div - so I use .parent()
...The keyup function is binded to all descendants, therefore:
-We need the e.stopPropagation() line.
-This code is NOT what you want if you DON'T want enter
key to initiate first button regardless of selected control.
*/
$(event.target).parent().bind('keydown.justWhileOpen', function (e) {
if (e.keyCode === $.ui.keyCode.ENTER) {
e.stopPropagation();
$(event.target).next('.ui-dialog-buttonpane')
.find('button:first').click();
}
});
}
};
... fonctionne en combinaison avec:
EBL.onUiDialogClose = function (event, ui) {
// Remove keyup handler when we close dialog
$(event.target).parent().unbind('.justWhileOpen');
};
Vous n'avez pas besoin de .onUiDialogClose si vous utilisez un div créé dynamiquement et le détruisez par la suite.
Vous pouvez voir ci-dessous comment utiliser ces fonctions de bibliothèque lors de l'initialisation d'un dialogue non dynamique ...
$('#divName').dialog({
//...
open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
//...
});
Jusqu'à présent, j'ai testé cela dans IE9 et le dernier chrome/firefox . Vous devez valider la boîte de dialogue comme nécessaire dans votre fonction "Ok".
Cela a fonctionné pour moi dans le dialogue en utilisant jquery 1.10.2
dialog({
focus: function() {
$(this).on("keyup", function(e) {
if (e.keyCode === 13) {
$(this).parent().find("button:eq(1)").trigger("click");
return false;
}
});
},
plus d'options...
$("#logonDialog").keydown(function (event) {if (event.keyCode == 13) {
$(this).parent().find("button:eq(0)").trigger("click");
return false;
}
});
J'utilise la version 1.10.0. Je ne pouvais pas le faire fonctionner avec ouvert mais avec concentration. Cela concentre le deuxième bouton:
focus: function(){
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
Dans mon cas, aucune des réponses n'a fonctionné parce que j'ai appelé .dialog sur un div vide et ajouté mes boutonsdynamiquement, de sorte que $(this).html() ne renvoie rien. Je ne pouvais donc pas appeler des méthodes telles que parent() ou siblings() et m'attendre à quelque chose en retour. Ce que j'ai fait était de sélectionner directement la classe ui-dialog-buttonpane et de trouver l'élément de bouton à partir de là.
HTML
<div id = "dialogexample">
</div>
Jquery
$("#dialogexample").dialog({
autoOpen: false,
modal: true,
open: function () {
$('.ui-dialog-buttonpane').find('#otherbutton').focus();
}
});
var buttons = {
"MyButton" : {
text: "Do Stuff",
id: "dostuffbutton"
},
"OtherButton" : {
text: "Other Stuff",
id: "otherbutton"
}
}
$("#dialogexample").dialog("option", "buttons", buttons);
$("#dialogexample").dialog("open"); //the second (otherbutton), instead of
//the first (dostuffbutton) button should be focused
Ce simple morceau de code donne du style à vos boutons et définit le dernier par défaut:
open: function(){
$buttonPane = $(this).next();
$buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary');
$buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default');
$buttonPane.find('button:last').focus();
},
Vous devriez utiliser: sélecteur tabbable et index de votre bouton (0 est le bouton [X], le votre à partir de 1)
open: function() {
var tb = $(":tabbable", this.parentNode);
if(tb.length>1) {
tb[1].focus();
}
}
Je sais que c’est un vieux fil de discussion, mais j’étais à la recherche de cette fonctionnalité exacte et j’ai été en mesure de mettre en œuvre ce qui me semble être la meilleure solution car j’ai trouvé que tout ce qui précède manquait un peu.
C'est une combinaison de deux réponses ci-dessus. Utiliser un identifiant plutôt que de compter sur la fonction find () pour rechercher l'élément button semble toujours être un meilleur choix pour moi.
La recherche explicite de la touche Entrée nous permet également de définir le focus sur l’élément souhaité lorsque le dialogue est ouvert, le cas échéant. Cela semble simplement permettre le maximum de flexibilité tout en satisfaisant le désir de déclencher un bouton spécifique par défaut lorsque la touche Entrée est enfoncée. J'ai également implémenté un "annuler" par défaut.
J'espère que cela aidera les autres à la recherche d'une bonne solution de boutons par défaut pour les dialogues.
$("#LoginBox").dialog({
open: function(){
$(this).keydown(function (event) {
if (event.keyCode == 13) {
$("#LogInButton").trigger("click");
return false;
}
if (event.keyCode == 27) {
$("#CancelButton").trigger("click");
return false;
}
});
},
close: function(){
$(this).dialog("destroy");
},
buttons: [
{
id: "LogInButton",
text: "Log In",
click: function(){
//button functionality goes here
$(this).dialog("destroy");
}
},
{
id: "CancelButton",
text: "Cancel",
click: function(){
$(this).dialog("destroy");
}
}
]
});