Soumettre le dialogue jQuery UI sur <Entrée>

Question

J'ai une boîte de dialogue jQuery UI avec un formulaire. J'aimerais simuler un clic sur l'un des boutons de la boîte de dialogue afin que vous n'ayez pas à utiliser la souris ou à cliquer sur le bouton. En d'autres termes, je veux qu'elle se comporte comme une boîte de dialogue GUI normale où l'on simule un clic sur le bouton "OK".

Je suppose qu'il s'agit d'une simple option de la boîte de dialogue, mais je ne la trouve pas dans le manuel de l'utilisateur. Documentation sur jQuery UI . Je pourrais lier chaque entrée du formulaire avec keyup() mais je ne savais pas s'il existait un moyen plus simple/plus propre. Merci.

Answer 1

Je ne sais pas s'il y a une option dans les widget jQuery UI mais vous pourriez simplement lier le keypress à la div qui contient votre dialogue...

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

Il s'exécutera quel que soit l'élément qui a le focus dans votre dialogue, ce qui peut être ou non une bonne chose en fonction de ce que vous voulez.

Si vous voulez faire de cette fonctionnalité la fonctionnalité par défaut, vous pouvez ajouter ce morceau de code :

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

Voici une vue plus détaillée de ce à quoi cela ressemblerait :

$( "#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 2

J'ai résumé les réponses ci-dessus et ajouté des éléments importants.

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

Avantages :

1. Interdire l'utilisation de la touche "Entrée" sur les éléments non compatibles, tels que textarea , select , button ou des entrées avec un bouton de type , imaginez que l'utilisateur clique sur le bouton "Entrée". textarea et obtenir le formulaire soumis au lieu d'obtenir une nouvelle ligne !
2. La liaison est faite une fois, évitez d'utiliser le callback de l'ouverture de la boîte de dialogue pour lier la touche Entrée afin d'éviter de lier la même fonction encore et encore à chaque fois que la boîte de dialogue est ouverte.
3. Évitez de modifier le code existant comme le suggèrent certaines réponses ci-dessus
4. Utilisez le terme "delegate" au lieu de l'ancien terme "live" et évitez d'utiliser la nouvelle méthode "on" pour pouvoir travailler avec les anciennes versions de jquery.
5. Parce que nous utilisons un délégué, cela signifie que le code ci-dessus peut être écrit même avant d'initialiser le dialogue. Vous pouvez également le mettre dans la balise head même sans $(document).ready
6. De même, le délégué ne liera qu'un seul gestionnaire à document et ne liera pas le gestionnaire à chaque dialogue comme dans le code ci-dessus, pour plus d'efficacité.
7. Fonctionne même avec les boîtes de dialogue générées dynamiquement comme $('<div><input type="text"/></div>').dialog({buttons: .});
8. Fonctionne avec ie 7/8/9 !
9. Évitez d'utiliser le sélecteur lent :first
10. Évitez d'utiliser des astuces comme dans les réponses aquí pour faire un bouton d'envoi caché

Inconvénients :

1. Exécutez le premier bouton comme bouton par défaut, vous pouvez choisir un autre bouton avec eq() ou appeler une fonction dans l'instruction if
2. Toutes les boîtes de dialogue auront le même comportement. Vous pouvez les filtrer en rendant votre sélecteur plus spécifique, c'est-à-dire en remplaçant '#dialog' par '.ui-dialog'

Je sais que la question est ancienne mais j'ai eu le même besoin, alors j'ai partagé la solution que j'ai utilisée.

Answer 3

<pre><code></code><p>Il fonctionne à merveille avec la dernière version de JQuery UI (1.8.1). Vous pouvez aussi utiliser : première au lieu de : dernière selon le bouton sur lequel vous souhaitez définir par défaut.</p><p>Cette solution, par rapport à celui sélectionné ci-dessus, a l’avantage de montrer quel bouton est celui par défaut pour l’utilisateur. L’utilisateur peut également onglet entre les boutons et en appuyant sur entrée vous cliquez sur le bouton actuellement au titre de la mise au point.</p><p>A bientôt.</p></pre>

Answer 4

Un moyen rudimentaire mais efficace de faire fonctionner ce système de manière plus générique :

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

Ensuite, lorsque vous créez un nouveau dialogue, vous pouvez faire ceci :

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

Et l'utiliser comme un dialogue jquery normal par la suite :

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

Il est possible d'améliorer ce système pour qu'il fonctionne dans des cas plus particuliers. Avec le code ci-dessus, il choisira automatiquement le premier bouton de la boîte de dialogue comme bouton à déclencher lorsque la touche Entrée est enfoncée. Il suppose également qu'il n'y a qu'une seule boîte de dialogue active à un moment donné, ce qui peut ne pas être le cas. Mais vous comprenez l'idée.

Remarque : comme indiqué ci-dessus, le bouton qui est enfoncé lors de la saisie dépend de votre configuration. Ainsi, dans certains cas, vous voudrez utiliser le sélecteur :first dans la méthode .find et dans d'autres, vous voudrez peut-être utiliser le sélecteur :last.

Answer 5

Plutôt que d'écouter les codes de touche comme dans cette réponse (que je n'ai pas réussi à faire fonctionner), vous pouvez vous lier à l'événement submit du formulaire dans la boîte de dialogue, puis faire ceci :

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

Donc, l'ensemble ressemblerait à ceci

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

Notez que les différents navigateurs traitent la touche "Entrée" différemment, et que certains d'entre eux n'effectuent pas toujours une soumission lors de l'entrée.