javascript - example - Diálogo jquery-ui: hacer que un botón en el cuadro de diálogo sea la acción predeterminada(tecla Intro)

jquery popup window

Question

En un diálogo modal jquery, ¿hay alguna manera de seleccionar un botón como la acción predeterminada (acción para ejecutar cuando el usuario presiona enter)?

Ejemplo de sitio web jquery: mensaje modal de diálogo jquery

En el ejemplo anterior, el cuadro de diálogo se cierra cuando el usuario presiona Esc. Me gustaría que se llame a la acción del botón "Aceptar" cuando el usuario presiona Intro.

Answer 1

Deberías usar: selector tabcable e índice de tu botón (0 es el botón [X], el tuyo comenzó desde 1)

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

Answer 2

En mi caso, ninguna de las respuestas funcionó porque llamé a .dialog en un div vacío y agregué mis botones dinámicamente , por lo que $(this).html() no devolvería nada. Así que no pude llamar a métodos como parent() o siblings() y esperar algo a cambio. Lo que hice fue seleccionar directamente la clase ui-dialog-buttonpane y encontrar el elemento del botón desde allí

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

Answer 3

Esta simple pieza de código estiliza tus botones y establece el valor predeterminado para el último:

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

  },

Answer 4

Esto funcionó para mí dentro del diálogo usando 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;
            }
        });
    },

mas opciones...

Answer 5

Estoy usando la versión 1.10.0. No pude hacer que funcione con abierto, pero con enfoque. Esto enfoca el segundo botón:

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

Answer 6

Me gusta este (me funciona), que deja el enfoque donde quería estar (un cuadro de texto)

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

Sin embargo, esto funciona solo para un botón (botón Aceptar), si es necesario '': eq (n)'' podría configurarse para seleccionar otro botón.

Nota: Agregué una nueva línea que devuelve falso para evitar el burbujeo del evento cuando se maneja la tecla enter, espero que ayude mejor que antes.

Answer 7

Otra opción que le da más control sobre todos los botones en el cuadro de diálogo es agregarlos como una matriz de botones. Luego, en el evento abierto , puedes obtener los botones por identificación y hacer lo que quieras (incluido establecer el foco )

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

Answer 8

Sé que este es un hilo viejo, pero estaba buscando esta funcionalidad exacta y pude implementar lo que creo que es la mejor solución, ya que encontré todo lo anterior un poco fallido.

Es una combinación de dos respuestas arriba. Usar una ID en lugar de confiar en la función find () para encontrar el elemento del botón siempre parece ser una opción mucho mejor para mí.

También al buscar explícitamente la tecla enter que se va a presionar, podemos establecer el foco en cualquier elemento que deseemos cuando se abre el cuadro de diálogo, si así lo desea. Esto parece permitir la mayor flexibilidad al mismo tiempo que satisface el deseo de activar un botón específico como ''predeterminado'' cuando se presiona la tecla enter. También he implementado un ''default'' cancelado también.

Espero que esto ayude a otros a buscar una buena solución de botón "predeterminado" para los diálogos.

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

Answer 9

Sin embargo, la manera más simple sería usar la acción de envío en un formulario dentro del diálogo:

• No quería requerir un formulario dentro del cuadro de diálogo (NB diferentes navegadores manejan la tecla Intro de manera diferente, y algunos no siempre hacen un envío al ingresar).
• Quería que esto funcionara si el usuario hace clic en el panel de título o panel de botones antes de presionar Enter.
• Quería hacer un método de biblioteca que pueda usar para CUALQUIER diálogo de jQueryUI.

La empresa para la que trabajo es ''EBL'' y evito el alcance global ... de ahí el prefijo sobre las funciones a continuación:

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

... funciona en combinación con:

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

No necesita .onUiDialogClose si está utilizando un div creado dinámicamente y lo destruye posteriormente.

Puede ver a continuación cómo uso estas funciones de biblioteca al inicializar un diálogo no dinámico ...

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

Hasta ahora he probado esto en IE9 y en Chrome / Firefox. Debe validar el diálogo como sea necesario en su función ''Aceptar''.

Answer 10

Una ligera variación para usar el nombre de los botones como selector. Se lee un poco mejor, pero hay una duplicación obvia con la cadena de texto del botón. Refactor a gusto

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

Answer 11

intente de esta manera:

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

Answer 12

Esta otra pregunta de debería llevarte a donde quieras:

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

Answer 13

En la función abierta de tu diálogo, puedes enfocar el botón:

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

Cambia el :eq(0) si está en un índice diferente, o encuentra por nombre, etc.

Answer 14

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