Focus sur le bouton de la boîte de dialogue jQuery UI

Question

Lorsqu'une boîte de dialogue jQuery UI s'ouvre, elle sélectionne l'un des boutons et le met en surbrillance ou lui attribue la priorité, etc. Comment puis-je arrêter ce comportement afin qu'aucun des boutons ne soit mis en évidence lorsque la boîte de dialogue s'ouvre ?

EDIT : J'ai essayé ce qui suit dans les options de la boîte de dialogue, ce qui n'a pas supprimé le focus des boutons :

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...

NOTE : Comme solution de contournement temporaire, j'ai modifié la CSS pour .ui-state-focus mais ce n'est pas idéal...

Answer 1

Il suffit d'ajouter cette ligne pour supprimer la fonctionnalité d'autofocus :

$.ui.dialog.prototype._focusTabbable = function(){};

Vous pouvez l'ajouter dans un fichier javascript partagé et il empêchera l'autofocus de toutes vos boîtes de dialogue ! Plus de copier-coller dans toutes vos boîtes de dialogue.

Answer 2

C'est ce que je fais habituellement, ça marche tout le temps :

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},

Answer 3

Ou, simplement, créer une entrée fictive avant d'appeler les autres boutons fonctionne tout aussi bien. Cela fonctionne parce que l'interface utilisateur recherche simplement la première "entrée" par défaut. En trompant l'interface utilisateur pour qu'elle voie d'abord une fausse entrée, le focus est redirigé.

<div id="dialog-confirm" title="Warning!">
<input type='text' size='0' style='position:relative;top:-500px;' />
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
 amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p>
</div>

Answer 4

Eh bien, toutes les solutions ici semblent aller avec le code ou les hacks. Je vais donc poster la mienne, qui n'est basée que sur une surcharge CSS. Ce qui me gênait, c'était le contour qui faisait que le bouton avait l'air "sélectionné", alors je l'ai simplement remplacé par "none" :

.ui-dialog .ui-dialog-titlebar button.ui-button:focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover  {
    outline:none;
}

Vous pouvez également ajouter/supprimer tout autre style qui vous dérange :)

Answer 5

En me basant sur les réponses de ED et Lev, j'ai obtenu cette bonne solution :

    jQuery("#testDialog").dialog({
        height: 280,
        width: 400,

        open: function () {             
            jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
        }
    });