jquery-ui-dialoogvenster: maak van een knop in het dialoogvenster de standaardactie (Enter-toets)

Is er in een jQuery modaal dialoogvenster een manier om een ​​knop te selecteren als de standaardactie (actie die moet worden uitgevoerd wanneer de gebruiker op enter drukt)?

Voorbeeld van jQuery-website:
modaal bericht in jQuery-dialoogvenster

In het bovenstaande voorbeeld wordt het dialoogvenster gesloten wanneer de gebruiker op Esc drukt. Ik wil graag dat de knopactie “Ok” wordt aangeroepen wanneer de gebruiker op Enter drukt.

Antwoord 1, autoriteit 100%

In de open functie van uw dialoog kunt u de knop focussen:

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

Verander de :eq(0)als deze in een andere index staat, of zoek op naam, enz.

Antwoord 2, autoriteit 92%

Ik vind deze leuk (hij werkt voor mij), waardoor de focus blijft waar ik wilde zijn (een tekstvak)

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

Dit werkt echter slechts voor één knop (Ok-knop), indien nodig kan ‘:eq(n)’ worden ingesteld om een ​​andere knop te selecteren.

Opmerking:ik heb een nieuwe regel toegevoegd die false retourneert om te voorkomen dat gebeurtenissen borrelen wanneer de enter-toets wordt verwerkt, ik hoop dat dit beter helpt dan voorheen.

Antwoord 3, autoriteit 51%

probeer het op deze manier:

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

Antwoord 4, autoriteit 31%

Deze andere stackoverflow-vraagzou je moeten brengen waar je wilt:

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

Antwoord 5, autoriteit 23%

Een andere optie die u meer controle geeft over alle knoppen in het dialoogvenster is om ze toe te voegen als een reeks knoppen. Dan kun je in het open evenementde knoppen per id krijgen en doen wat je wilt (inclusief de focus instellen)

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

Antwoord 6, autoriteit 15%

Een kleine variatie om de naam van de knop als selector te gebruiken. Het leest een beetje beter, maar er is duidelijke duplicatie met de knoptekstreeks. Refactor naar smaak.

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

Antwoord 7, autoriteit 5%

De eenvoudigste manier is echter om de verzendactie op een formulier in het dialoogvenster te gebruiken:

• Ik wilde geen formulier in het dialoogvenster nodig hebben (N.B. verschillende browsers behandelen de enter-toets anders, en sommige doen niet altijd een submit bij enter).
• Ik wilde dat dit zou werken als de gebruiker in het titelvenster of het knoppenvenster klikt voordat hij op enter drukt.
• Ik wilde een bibliotheekmethode maken die ik voor ALLES kan gebruiken
  jQueryUI-dialoogvenster.

Het bedrijf waar ik voor werk is ‘EBL’ en ik vermijd wereldwijde reikwijdte…vandaar het voorvoegsel op de onderstaande functies:

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

…werkt in combinatie met:

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

U hebt de .onUiDialogClose niet nodig als u een dynamisch gemaakte div gebruikt en deze daarna vernietigt.

U kunt hieronder zien hoe ik deze bibliotheekfuncties gebruik bij het initialiseren van een niet-dynamisch dialoogvenster…

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

Tot nu toe heb ik dit getest in IE9 en de nieuwste chrome/firefox.
U moet het dialoogvenster zo nodig valideren in uw ‘Ok’-functie.

Antwoord 8, autoriteit 3%

Ik gebruik versie 1.10.0. Ik kreeg het niet werkend met open maar met focus. Dit focust de tweede knop:

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

Antwoord 9, autoriteit 3%

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

Antwoord 10, autoriteit 3%

Dit werkte voor mij in de dialoog met 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;
            }
        });
    },

meer opties…

Antwoord 11

Dit eenvoudige stukje code geeft uw knoppen een opmaak en stelt de standaard in op de laatste:

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

Antwoord 12

In mijn geval werkte geen van de antwoorden omdat ik .dialogop een lege div had aangeroepen en mijn knoppen dynamischhad toegevoegd, dus de $(this).html()zou niets opleveren. Dus ik kon geen methoden als parent()of siblings()aanroepen en iets terug verwachten. Wat ik deed, was de klasse ui-dialog-buttonpanerechtstreeks selecteren en daar het knopelement vinden

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

Antwoord 13

Ik weet dat dit een oude thread is, maar ik was op zoek naar deze exacte functionaliteit en kon implementeren wat volgens mij de beste oplossing is, omdat ik vond dat al het bovenstaande een beetje tekortschiet.

Het is een combinatie van twee bovenstaande antwoorden. Het gebruik van een ID in plaats van te vertrouwen op de functie find() om het knopelement te vinden, lijkt mij altijd een veel betere keuze.

Ook expliciet zoeken naar de enter-toets die moet worden ingedrukt, stelt ons in staat om de focus in te stellen op elk element dat we willen wanneer het dialoogvenster wordt geopend, indien gewenst. Dit lijkt de meeste flexibiliteit te bieden en tegelijkertijd te voldoen aan de wens om een ​​specifieke knop als ‘standaard’ te activeren wanneer de enter-toets wordt ingedrukt. Ik heb ook een standaard ‘annuleren’ geïmplementeerd.

Ik hoop dat dit anderen helpt die op zoek zijn naar een goede ‘standaard’ knopoplossing voor dialoogvensters.

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

Antwoord 14

U moet :tabtable selector en index van uw knop gebruiken (0 is [X]-knop, de jouwe begon bij 1)

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