javascript - form - Enviar el diálogo de la interfaz de usuario de jQuery en<Entrar>

pop up dialog jquery

Question

Tengo un cuadro de diálogo de interfaz de usuario jQuery con un formulario. Me gustaría simular un clic en uno de los botones del diálogo para que no tenga que usar el mouse o la pestaña. En otras palabras, quiero que actúe como un cuadro de diálogo de GUI normal donde simula presionar el botón "Aceptar".

Supongo que esta podría ser una opción simple con el diálogo, pero no puedo encontrarlo en la documentación de jQuery UI . Podría vincular cada entrada de formulario con keyup () pero no sabía si había una forma más simple / limpia. Gracias.

Answer 1

A veces olvidamos lo fundamental de lo que el navegador ya admite:

<input type="submit" style="visibility:hidden" />

Esto hará que la tecla ENTRAR envíe el formulario.

Answer 2

Aquí esta lo que hice:

myForm.dialog({
  "ok": function(){
    ...blah...
  }
  Cancel: function(){
    ...blah...
  }
}).keyup(function(e){
  if( e.keyCode == 13 ){
   $(this).parent().find(''button:nth-child(1)'').trigger("click");
  }
});

En este caso, myForm es un objeto jQuery que contiene el html del formulario (nota, no hay etiquetas de "formulario" allí ... si las coloca en la pantalla completa se actualizarán cuando presione "enter").

Cada vez que el usuario presiona "enter" desde el formulario será el equivalente a hacer clic en el botón "Aceptar".

Esto también evita el problema de tener el formulario abierto con el botón "ok" ya resaltado. Si bien eso sería bueno para formularios sin campos, si necesita que el usuario complete las cosas, entonces probablemente desee que se resalte el primer campo.

Answer 3

Ben Clayton''s es el más limpio y el más corto, y se puede colocar en la parte superior de la página de índice antes de que se hayan inicializado los cuadros de diálogo de jquery. Sin embargo, me gustaría señalar que ".live" ha quedado obsoleto. La acción preferida ahora es ".on". Si quiere que ".on" funcione como ".live", tendrá que usar eventos delegados para adjuntar el controlador de eventos. Además, algunas otras cosas ...

1. Prefiero usar el método ui.keycode.ENTER para probar la tecla Intro ya que no tiene que recordar el código de tecla real.

2. El uso del botón "$ (''.ui-dialog-buttonpane: first'', $ (this))" para el selector de clics hace que todo el método sea genérico.

3. Desea agregar "return false;" para prevenir el incumplimiento y detener la propagación.

En este caso...

$(''body'').on(''keypress'', ''.ui-dialog'', function(event) { 
    if (event.keyCode === $.ui.keyCode.ENTER) { 
        $(''.ui-dialog-buttonpane button:first'', $(this)).click();
        return false;
    }
});

Answer 4

Dale a tus botones classes y selecciónalos de la manera habitual:

$(''#DialogTag'').dialog({
  closeOnEscape: true,
  buttons: [
    {
      text: ''Cancel'',
      class: ''myCancelButton'',
      click: function() {
        // Close dialog fct
      }
    },
    {
      text: ''Ok'',
      class: ''myOKButton'',
      click: function() {
        // OK fct
      }
    }
  ],
  open: function() {

    $(document).keyup(function(event) {

      if (event.keyCode === 13) {
        $(''.myOKButton'').click();
      }

    });

  }
});

Answer 5

Debajo del cuerpo se usa porque el diálogo DIV se agregó al cuerpo, por lo que el cuerpo ahora escucha el evento del teclado. Probó en IE8,9,10, Mojila, Chrome.

open: function() {
$(''body'').keypress(function (e) { 
     if (e.keyCode == 13) {   
     $(this).parent().find(".ui-dialog-buttonpane button:eq(0)").trigger("click");
     return false; 
     }
  }); 
}

Answer 6

En lugar de escuchar los códigos clave como en esta respuesta (que no pude obtener para trabajar), puede enlazar al evento submit del formulario dentro del cuadro de diálogo y luego hacer esto:

$("#my_form").parents(''.ui-dialog'').first().find(''.ui-button'').first().click();

Entonces, todo se vería así

$("#my_form").dialog({
  open: function(){
    //Clear out any old bindings
    $("#my_form").unbind(''submit'');
    $("#my_form").submit(function(){
      //simulate click on create button
      $("#my_form").parents(''.ui-dialog'').first().find(''.ui-button'').first().click();
      return false;
    });
  },
  buttons: {
    ''Create'': function() {
      //Do something
    },
    ''Cancel'': function() {
      $(this).dialog(''close'');
    }
  }
});

Tenga en cuenta que diferentes navegadores manejan la tecla Intro de manera diferente, y algunos no siempre hacen un envío al ingresar.

Answer 7

Encontré esta solución, funciona en IE8, Chrome 23.0 y Firefox 16.0

Está basado en el comentario de Robert Schmidt.

$("#id_dialog").dialog({
    buttons: [{
        text: "Accept",
        click: function() {
            // My function
        },
        id: ''dialog_accept_button''
    }]
}).keyup(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER)
        $(''#dialog_accept_button'').click();
});

Espero que ayude a cualquiera.

Answer 8

Encontré una solución bastante simple para este problema:

var d = $(''<div title="My dialog form"><input /></div>'').dialog(
    buttons: [{
        text: "Ok",
        click: function(){
            // do something
            alert(''it works'');
        },
        className: ''dialog_default_button''
    }]
});

$(d).find(''input'').keypress(function(e){
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        e.preventDefault();
        $(''.dialog_default_button'').click();
    }
});

Answer 9

Esto debería funcionar para activar el clic del controlador de clic del botón. este ejemplo asume que ya ha configurado el formulario en el cuadro de diálogo para usar el complemento jquery.validate. pero podría ser fácilmente adaptado.

open: function(e,ui) {
    $(this).keyup(function(e) {
        if (e.keyCode == 13) {
           $(''.ui-dialog-buttonpane button:last'').trigger(''click'');
        }
    });
},
buttons: {
    "Submit Form" : function() {
            var isValid = $(''#yourFormsID'').valid();
            // if valid do ajax call
            if(isValid){
               //do  your ajax call here. with serialize form or something...

            }
}

Answer 10

Funciona bien ¡Gracias!

open: function () { debugger; $("#dialogDiv").keypress(function (e) { if (e.keyCode == 13) { $(this).parent().find("#btnLoginSubmit").trigger("click"); } }); },

Answer 11

He resumido las respuestas anteriores y he agregado cosas importantes

$(document).delegate(''.ui-dialog'', ''keyup'', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === ''input'' && target.type === ''button'') 
          ? ''button'' 
          : tagName;

        isClickableTag = tagName !== ''textarea'' && 
          tagName !== ''select'' && 
          tagName !== ''button'';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find(''.ui-dialog-buttonset button'').eq(0).trigger(''click'');

            return false;
        }
    });

Ventajas:

1. No permita ingresar clave en elementos no compatibles como textarea , select , button o entradas con el botón de tipo, imagínese usuario haciendo clic en ingresar en textarea y obtenga el formulario enviado en lugar de obtener una nueva línea.
2. La vinculación se realiza una vez, evite utilizar la función de devolución de llamada "abierta" para vincular la tecla enter para evitar vincular la misma función una y otra vez cada vez que se "abre" el diálogo
3. Evite cambiar el código existente ya que algunas de las respuestas anteriores sugieren
4. Use ''delegate'' en lugar del obsoleto ''live'' y evite usar el nuevo método ''on'' para permitir trabajar con versiones anteriores de jquery
5. Debido a que usamos delegar, eso significa que el código anterior puede escribirse incluso antes de iniciar el diálogo. también puede colocarlo en la etiqueta principal incluso sin $(document).ready
6. Además, el delegado vinculará solo un manejador para document y no vinculará el manejador a cada diálogo como en algún código anterior, para una mayor eficiencia.
7. Funciona incluso con diálogos generados dinámicamente como $(''<div><input type="text"/></div>'').dialog({buttons: .});
8. Trabajó con ie 7/8/9!
9. Evite usar el selector lento :first
10. Evite usar hacks como en las respuestas here para hacer un botón de envío oculto

Desventajas:

1. Ejecute el primer botón como el predeterminado, puede elegir otro botón con eq() o llamar a una función dentro de la instrucción if
2. Todos los cuadros de diálogo tendrán el mismo comportamiento que usted puede filtrar haciendo que su selector sea más específico, es decir, ''#dialog'' en lugar de ''.ui-dialog''

Sé que la pregunta es antigua pero he tenido la misma necesidad, así que compartí la solución que he usado.

Answer 12

Lo hice de esa manera ...;) Espero que sea útil para alguien ...

$(window).keypress(function(e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $(".ui-dialog:visible").find(''.ui-dialog-buttonpane'').find(''button:first'').click();
        return false;
    }
});

Answer 13

Me doy cuenta de que ya hay muchas respuestas, pero naturalmente considero que mi solución es la mejor, y posiblemente la más corta. Tiene la ventaja de que funciona en cualquier cuadro de diálogo creado en cualquier momento en el futuro.

$(".ui-dialog").live("keyup", function(e) {
    if (e.keyCode === 13) {
        $(''.ok-button'', $(this) ).first().click();
    }
});

Answer 14

Ninguna de estas soluciones pareció funcionar para mí en IE9. Terminé con esto ...

$(''#my-dialog'').dialog({
    ...
    open: function () {
        $(this).parent()
               .find("button:eq(0)")
               .focus()
               .keyup(function (e) {
                   if (e.keyCode == $.ui.keyCode.ENTER) {
                       $(this).trigger("click");
                   };
               });
    }
});

Answer 15

No sé si es más simple, pero normalmente harías un seguimiento de qué botón tiene el foco actual. Si el enfoque se cambia a un control diferente, entonces el "enfoque del botón" permanecerá en el botón que tuvo el último enfoque. Por lo general, el "botón de enfoque" se iniciará en su botón predeterminado. Tabbing a un botón diferente cambiaría el "enfoque del botón". Tendría que decidir si navegar a un elemento de formulario diferente restablecería nuevamente el "foco del botón" al botón predeterminado. También es probable que necesite algún indicador visual que no sea el predeterminado del navegador para indicar el botón enfocado ya que pierde el foco real en la ventana.

Una vez que haya desactivado e implementado la lógica de enfoque del botón, probablemente agregue un manejador de teclas al diálogo mismo y haga que invoque la acción asociada con el botón actualmente "enfocado".

EDITAR : asumo que desea poder presionar ingresar en cualquier momento que complete los elementos del formulario y que la acción del botón "actual" tenga prioridad. Si solo quieres este comportamiento cuando el botón está realmente enfocado, mi respuesta es demasiado complicada.

Answer 16

Porque no tengo suficiente reputación para publicar comentarios.

$(document).delegate(''.ui-dialog'', ''keyup'', function(e) {
  var tagName = e.target.tagName.toLowerCase();

  tagName = (tagName === ''input'' && e.target.type === ''button'') ? ''button'' : tagName;

  if (e.which === $.ui.keyCode.ENTER && tagName !== ''textarea'' && tagName !== ''select'' && tagName !== ''button'') {
      $(this).find(''.ui-dialog-buttonset button'').eq(0).trigger(''click'');
    return false;
  } else if (e.which === $.ui.keyCode.ESCAPE) {
      $(this).close();
  }
});

La respuesta modificada por Basemm # 35 también agrega Escape para cerrar el diálogo.

Answer 17

Una forma cruda pero efectiva de hacer que esto funcione de manera más genérica:

$.fn.dlg = function(options) {
    return this.each(function() {
             $(this).dialog(options);
             $(this).keyup(function(e){
                  if (e.keyCode == 13) {                
                       $(''.ui-dialog'').find(''button:first'').trigger(''click'');
                  }
             });
    });
}

Luego, cuando crea un nuevo diálogo, puede hacer esto:

$(''#a-dialog'').mydlg({...options...})

Y utilícelo como un diálogo de jquery normal a partir de entonces:

$(''#a-dialog'').dialog(''close'')

Hay formas de mejorar eso para hacerlo funcionar en casos más especiales. Con el código anterior, seleccionará automáticamente el primer botón en el cuadro de diálogo como el botón para disparar cuando se golpea enter. También asume que solo hay un diálogo activo en un momento dado que puede no ser el caso. Pero se entiende la idea.

Nota: Como se mencionó anteriormente, el botón que se presiona para ingresar depende de su configuración. Entonces, en algunos casos, querrá usar el primer selector en el método .find y en otros puede usar el último selector.

Answer 18

hecho y hecho

  $(''#login input'').keyup(function(e) {
      if (e.keyCode == 13) {
          $(''#login form'').submit();
      }
   }

Answer 19

si conoce el selector de elementos de botón:

$(''#dialogBox'').dialog(''open'');
$(''#okButton'').focus();

Debería hacer el truco para ti. Esto enfocará el botón Aceptar e ingresará ''clic'', como era de esperar. Esta es la misma técnica utilizada en los diálogos de IU nativos.

Answer 20

No sé si hay una opción en el widget jQuery UI , pero simplemente podría vincular el evento keypress al div que contiene su diálogo ...

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

Esto se ejecutará sin importar qué elemento tenga el foco en tu diálogo, lo cual puede o no ser bueno dependiendo de lo que desees.

Si desea que esta sea la funcionalidad predeterminada, puede agregar este fragmento de código:

// jqueryui defaults
$.extend($.ui.dialog.prototype.options, { 
    create: function() {
        var $this = $(this);

        // focus first button and bind enter to it
        $this.parent().find(''.ui-dialog-buttonpane button:first'').focus();
        $this.keypress(function(e) {
            if( e.keyCode == $.ui.keyCode.ENTER ) {
                $this.parent().find(''.ui-dialog-buttonpane button:first'').click();
                return false;
            }
        });
    } 
});

Aquí hay una vista más detallada de cómo se vería:

$( "#dialog-form" ).dialog({
  buttons: { … },
  open: function() {
    $("#dialog-form").keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find("button:eq(0)").trigger("click");
      }
    });
  };
});

Answer 21

   $("#LogOn").dialog({
       modal: true,
       autoOpen: false,
       title: ''Please Log On'',
       width: 370,
       height: 260,
       buttons: { "Log On": function () { alert(''Hello world''); } },
       open: function() { $(this).parents(''.ui-dialog-buttonpane button:eq(0)'').focus();}
   });

Answer 22

$(''#DialogID'').dialog("option", "buttons")["TheButton"].apply()

Esto funciono muy bien para mi..

Answer 23

$(''#dialogBox'').dialog(''open'');
$(''.ui-dialog-buttonpane > button:last'').focus();

Funciona maravillosamente con la última versión de JQuery UI (1.8.1). También puede usar: primero en lugar de: último según el botón que desee establecer como predeterminado.

Esta solución, en comparación con la seleccionada anteriormente, tiene la ventaja de mostrar qué botón es el predeterminado para el usuario. El usuario también puede presionar TAB entre los botones y presionar ENTER hará clic en el botón actualmente bajo enfoque.

Aclamaciones.