jQuery UI dialogue bouton focus

Merci pour les réponses, mais il me semble que la meilleure solution (au moins pour moi, un code minimal et pas d'utilisation inutile de méthodes sur le DOM) est de définir vos boutons de dialogue dans un tableau d'objet:

buttons: [{
            id  :   "button1",
            text    :   "Button1 text",
            title   :   "tooltip1text1",
            tabIndex:   -1,
            click   :   clickCallback 
        },{
            id      :   "button2",
            text    :   "Button2 text", 
            title   :   "tooltip1text2",
            tabIndex:   -1,
            click   :   function(){$(this).dialog("close")}
        }]

La partie importante pour empêcher vos boutons d'obtenir le focus est: tabIntex:-1

C'est aussi un moyen pratique et lisible de donner de l'id à vos boutons.

J'ai eu le même problème... Essayer de mettre le focus sur un autre élément ne semblait pas faire l'affaire pour moi, mais flouter le focus de l'élément sélectionné (dans le rappel "ouvert") a fait:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $('#element-that-gets-selected').blur();
        }
    });

Je suppose qu'une façon de prévenir l'accent sans spécifier un nom spécifique serait d'utiliser un sélecteur d'abord, comme ceci:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });

buttons: [
    {
        tabIndex: -1,
        text: 'Yes',
        click: function(){
            DeleteStuff();
            $(this).dialog('close');
        }
    },
    {
        text: 'No',
        click: function(){
            // Don't delete
            $(this).dialog('close');
        }
    }
]

C'est la seule façon dont je l'ai fait fonctionner. tabIndex: -1 est la solution.

Oh, et je voulais me concentrer sur le deuxième bouton, donc mon "Supprimer l'Article?"la confirmation ne supprimerait pas l'élément par défaut.

Il est clair que le focus fait défiler la boîte de dialogue jQuery vers des zones intéressantes lorsqu'elle est ouverte. Il est référencé à peu près partout maintenant.

Flou fonctionne, mais pas si vous avez beaucoup de contenu. si le bouton est en bas du contenu, blur supprimera la sélection, mais laissera la boîte de dialogue défiler vers le bas. l'utilisation de scrollTop a fait défiler le contenu vers le haut, mais a laissé le bouton sélectionné. Si un utilisateur appuie accidentellement sur la touche Retour, le bouton ou le lien se déclenche. J'ai choisi un combinaison:

$('#dialog').dialog({
    open: function (event, ui){

        $('a_selector').blur();
        $(this).scrollTop(0); 

    }
});

Travaillé comme un champion...

C'est ce que je fais habituellement, fonctionne tout le temps:

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

Eh bien, toutes les solutions ici semblent aller avec du code ou des hacks. Donc, je vais poster le mien, qui est basé juste dans CSS override. Ce qui m'a dérangé, c'est le contour qui a fait paraître le bouton comme "sélectionné", donc 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/remplacer tout autre style qui vous dérange:)

Sur la base des réponses D'ED et Lev, j'ai eu cette bonne solution:

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

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

Ou, simplement créer une entrée factice 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 incitant l'interface utilisateur à voir une fausse entrée en premier, 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>

Je suis tombé sur un petit hack pour résoudre ce problème que d'autres pourraient trouver utile. Une solution comme celle-ci semble fonctionner pour moi:

$( "#button" ).click(function() {                                   
    // this is a hack to prevent the focus from remaining after a click
    $(this).toggle(this.checked);                                       
});

Il réinitialise simplement le contrôle par programmation, ce qui semble éclaircir le problème de focus.

Je sais que la réponse a déjà été sélectionnée, mais il existe une solution HTML simple que j'ai trouvée ici il y a longtemps.

Ajoutez le code suivant comme premier élément à L'intérieur de la DIV que vous désignez comme votre boîte de dialogue.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

Ajoutez simplement cette ligne pour supprimer la fonctionnalité autofocus:

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

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