wake-up-neo.net

jquery-ui Dialog: Eine Schaltfläche im Dialog als Standardaktion festlegen (Eingabetaste)

Gibt es in einem modifizierten Jquery-Dialog eine Möglichkeit, eine Schaltfläche als Standardaktion auszuwählen (Aktion, die ausgeführt wird, wenn der Benutzer die Eingabetaste drückt)?

Beispiel für eine Jquery-Website: Jquery Dialog Modal Message

Im obigen Beispiel wird der Dialog geschlossen, wenn der Benutzer die Esc-Taste drückt. Ich möchte, dass die "Ok" -Schaltfläche aufgerufen wird, wenn der Benutzer die Eingabetaste drückt.

53
fgui

In der geöffneten Funktion Ihres Dialogs können Sie die Schaltfläche fokussieren:

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

Ändern Sie die :eq(0), wenn sie sich in einem anderen Index befindet, oder suchen Sie nach Name usw.

34
Nick Craver

Ich mag dieses (es arbeitet für mich), wodurch der Fokus dort bleibt, wo ich sein wollte (ein Textfeld)

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

Dies funktioniert jedoch nur für eine Taste (Ok-Taste), falls erforderlich: 'eq (n)' könnte so eingestellt werden, dass eine andere Taste ausgewählt wird.

Hinweis: Ich habe eine neue Zeile hinzugefügt, die den Wert false zurückgibt, um das Sprudeln von Ereignissen zu verhindern, wenn die Eingabetaste verarbeitet wird. Ich hoffe, es hilft besser als zuvor.

33
Eugenio Miró

versuchen Sie es so:

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

Diese andere Frage zum Stackoverflow soll Sie an die gewünschte Stelle bringen:

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

Eine weitere Option, die Ihnen mehr Kontrolle über alle Schaltflächen im Dialogfeld gibt, besteht darin, sie als Array von Schaltflächen hinzuzufügen. Dann können Sie im open -Ereignis die Schaltflächen anhand der ID abrufen und machen, was Sie möchten (einschließlich den Fokus setzen )

$('#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();
    }
});
8
Mark B

Eine geringfügige Variante, um den Schaltflächennamen als Auswahl zu verwenden. Es liest sich etwas besser, aber es ist offensichtlich, dass die Textzeichenfolge der Schaltfläche doppelt vorhanden ist. Refactor nach Geschmack.

$("#confirm-dialog").dialog({
    buttons: {
        "Cancel" : function(){},
        "OK" : function(){}
    },
    open: function() {
        $(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus(); 
    }
});
5
matt burns

Am einfachsten wäre es jedoch, die Submit-Aktion für ein Formular im Dialog zu verwenden:

  • Ich wollte kein Formular innerhalb des Dialogs anfordern (Hinweis: Verschiedene Browser behandeln die Eingabetaste unterschiedlich, und manche führen nicht immer eine Eingabe bei Eingabe durch).
  • Ich wollte, dass dies funktioniert, wenn der Benutzer vor dem Drücken der Eingabetaste in den Titel- oder Schaltflächenbereich klickt.
  • Ich wollte eine Bibliotheksmethode erstellen, die ich für JEDER. JQueryUI-Dialog verwenden kann.

Die Firma, für die ich arbeite, ist 'EBL' und ich vermeide globale Reichweite ... daher das Präfix für die folgenden Funktionen:

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();
            }
        });
    }
};

... funktioniert in Kombination mit:

EBL.onUiDialogClose = function (event, ui) {
    // Remove keyup handler when we close dialog
    $(event.target).parent().unbind('.justWhileOpen');
};

Sie benötigen die .onUiDialogClose nicht, wenn Sie ein dynamisch erstelltes div verwenden und es anschließend zerstören.

Nachfolgend sehen Sie, wie ich diese Bibliotheksfunktionen beim Initialisieren eines nicht dynamischen Dialogs verwende ...

$('#divName').dialog({
    //...
    open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
    close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
    //...
});

Bisher habe ich dies in IE9 und in der neuesten Version von Chrome/Firefox getestet. Sie sollten den Dialog in Ihrer 'Ok'-Funktion als notwendig bestätigen.

2
Darren

Dies hat für mich im Dialog mit Jquery 1.10.2 funktioniert

dialog({
    focus: function() {
        $(this).on("keyup", function(e) {
            if (e.keyCode === 13) {
                $(this).parent().find("button:eq(1)").trigger("click");
                return false;
            }
        });
    },

mehr Optionen...

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

Ich verwende Version 1.10.0. Ich konnte es nicht mit offen, aber mit Fokus erreichen. Dies fokussiert die zweite Taste:

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

In meinem Fall funktionierte keine der Antworten, weil ich .dialog für ein leeres div aufgerufen habe und meine Schaltflächendynamischhinzugefügt habe, sodass die $(this).html() nichts zurückgibt. Ich konnte also keine Methoden wie parent() oder siblings() aufrufen und erwarte eine Gegenleistung. Was ich tat, war, die Klasse ui-dialog-buttonpane direkt auszuwählen und das Schaltflächenelement von dort zu finden

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
0
Chris Gong

Mit diesem einfachen Code werden Ihre Schaltflächen formatiert und der Standardwert auf den letzten festgelegt:

 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();

  },
0
Marcel Verwey

Sie sollten Folgendes verwenden: tabulierbare Auswahl und Index Ihrer Schaltfläche (0 ist [X] -Taste, Ihre Startnummer ist 1).

open: function() {
    var tb = $(":tabbable", this.parentNode);
    if(tb.length>1) {
        tb[1].focus();
    }
}
0
Aleksey

Ich weiß, dass dies ein alter Thread ist, aber ich habe nach genau dieser Funktionalität gesucht und konnte die meiner Meinung nach beste Lösung implementieren, da ich fand, dass all dies ein wenig zu kurz ist.

Es ist eine Kombination von zwei Antworten oben. Die Verwendung einer ID, anstatt sich auf die find () - Funktion zu verlassen, um das Schaltflächenelement zu finden, scheint mir immer eine bessere Wahl zu sein. 

Wenn Sie explizit nach der zu drückenden Eingabetaste suchen, können Sie den Fokus auf das gewünschte Element setzen, wenn Sie den Dialog öffnen, falls gewünscht. Dies scheint nur die größtmögliche Flexibilität zu ermöglichen und erfüllt gleichzeitig den Wunsch, eine bestimmte Schaltfläche als 'Standard' auszulösen, wenn die Eingabetaste gedrückt wird. Ich habe auch einen 'cancel' Default implementiert.

Ich hoffe, dies hilft anderen bei der Suche nach einer guten "Standard" -Knopflösung für Dialoge.

$("#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");
         }
      }
   ]
});
0
Stephen