web-dev-qa-db-fra.com

Focus sur le bouton de dialogue jQuery UI

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

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

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

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

jquery-uidialog
58
davidsleeps

Utilisez la méthode du flou. Vous pouvez essayer cet exemple.

<html>
    <head>
        <title>No Focus on jQuery Dialog</title>
        <link type="text/css" rel="stylesheet" href="ui.all.css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dialog.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Dialog to confirm or cancel
                // Focuses on confirm by default.
                $('#noFocusDialog').dialog({
                    autoOpen: false,
                    buttons: {
                        Confirm: function() {
                            $(this).dialog('close');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    }
                });

                // Trigger to open the dialog
                $('#openNoFocusDialog').click(function() {
                    $('#noFocusDialog').dialog('open');

                    // Remove focus on all buttons within the
                    // div with class ui-dialog
                    $('.ui-dialog :button').blur();
                });
            });
        </script>
    </head>
    <body>
        <a id="openNoFocusDialog" href="#">Open Dialog</a>
        <div id="noFocusDialog">
            <p>Confirm that no elements have focus</p>
        </div>
    </body>
</html>
68
Ed I

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'objets:

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 de se concentrer est: tabIntex: -1

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

17
Aureltime

J'ai eu ce même problème ... Essayer de définir le focus sur un autre élément ne semblait pas faire l'affaire pour moi, mais le flou du 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'un moyen d'empêcher le focus sans spécifier un nom spécifique serait d'utiliser d'abord un sélecteur, comme ceci:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });
8
Lev
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 de le faire fonctionner. tabIndex: -1 est la solution.

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

6
Niklaus

Il est clair que la boîte de dialogue jQuery défile vers les zones intéressantes lorsqu'elle est ouverte. Il est référencé un peu partout maintenant.

le flou fonctionne, mais pas si vous avez beaucoup de contenu. si le bouton est en bas du contenu, le flou supprimera la sélection, mais laissera la boîte de dialogue défilée vers le bas. using scrollTop fait défiler le contenu vers le haut, mais laisse le bouton sélectionné. Si un utilisateur appuyait accidentellement sur la touche de retour, le bouton ou le lien se déclencherait. J'ai choisi une combinaison:

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

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

    }
});

travaillé comme un champion ...

4
user82646

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

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

Sur la base des réponses de 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();
        }
    });
1
Justin

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 du DIV que vous désignez comme boîte de dialogue.

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

Eh bien, toutes les solutions semblent aller de pair avec du code ou des hacks. Je vais donc publier le mien, qui est basé uniquement sur le remplacement CSS. Ce qui me dérangeait, c'était le contour qui donnait au bouton l'air "sélectionné", donc je l'ai simplement remplacé par "aucun":

.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 :)

1
John Bernardsson

Ou, tout 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" comme valeur 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>
0
Mgfranz

Je pourrais faire ça de cette façon. jquery-ui-1.12.0.custom/jquery-ui.css -> onuline: aucun ajouter sur 896 ligne ouline: aucun

.ui-widget button {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        outline:none;
    }
0
shinchul son

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 définit simplement par programme la vérification à nouveau, ce qui semble résoudre le problème de focus.

0
poleguy

Ajoutez simplement cette ligne pour supprimer la fonctionnalité de mise au point automatique:

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

Vous pouvez l'ajouter dans un fichier javascript partagé et cela empêchera la mise au point automatique de toutes vos boîtes de dialogue! Plus de copier-coller dans toutes vos boîtes de dialogue

0
joalcego