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

Question

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

Demandé el 24 de Novembre, 2009: Quand la question a-t-elle été
40920 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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...

Demandé el 24 de Novembre, 2009 par davidsleeps

0 votes

Voir dev.jqueryui.com/ticket/4731 . Une option sera ajoutée pour rendre cela configurable dans la version 1.9.

Commenté el 27 de Octobre, 2010 par cope360

0 votes

Voir stackoverflow.com/questions/1202079/ pour les détails du code qui cause cela.

Commenté el 27 de Octobre, 2010 par cope360

0 votes

[Voir ma solution pour empêcher le saut du focus vers la boîte de dialogue jQuery UI][1] [1] : stackoverflow.com/questions/1202079/

Commenté el 24 de Février, 2012 par Roc

Answer 1

5 Réponses

Answer 2

71voto

Ed Saito Points 1403

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

<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>

Répondu el 3 de Février, 2010 par Ed Saito (1403 Points )

Answer 3

18voto

Aureltime Points 226

Merci pour les réponses, mais il me semble que la meilleure solution (du moins pour moi, 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 d'obtenir le focus est : tabIntex:-1

C'est aussi un moyen pratique et lisible de donner une identité à vos boutons.

Répondu el 3 de Décembre, 2012 par Aureltime (226 Points )

5 votes

Ce n'est pas une bonne idée. L'accessibilité n'est pas garantie, car cela empêche d'utiliser la touche de tabulation pour naviguer dans l'interface utilisateur.

Commenté el 7 de Novembre, 2013 par Vroo

0 votes

Si vous êtes préoccupé par l'accessibilité (comme le mentionne @Vroo), cette réponse est toujours valable s'il n'y a qu'un seul bouton et qu'il ferme le dialogue. De cette façon, l'utilisateur peut simplement utiliser la touche Echap pour la fermer. Veillez simplement à laisser le bouton closeOnEscape comme true .

Commenté el 5 de Juillet, 2015 par Mike

Answer 4

8voto

Lev Points 381

J'ai eu le même problème... Essayer de mettre le focus sur un autre élément n'a pas semblé faire l'affaire pour moi, mais brouiller le focus de l'élément sélectionné (dans le callback "open") l'a fait :

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

Je suppose qu'une façon d'empêcher la focalisation sans spécifier un nom spécifique serait d'utiliser un sélecteur avec premier, comme ceci :

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

Répondu el 8 de Janvier, 2011 par Lev (381 Points )

1 votes

En fait, j'ai utilisé le code de @Ed Saito à l'intérieur du fichier open: la fonction de l'option et cela a bien fonctionné. Comme : `open : function() { $(".ui-dialog :button").blur() ; }

Commenté el 8 de Avril, 2011 par JustinP8

Answer 5

6voto

Niklaus Points 281

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, afin que ma confirmation "Supprimer l'élément ?" ne supprime pas l'élément par défaut.

Répondu el 26 de Février, 2013 par Niklaus (281 Points )

Answer 6

4voto

Utilisateur non enregistré Points 0

Il est clair qu'il fait défiler le dialogue jQuery vers des zones intéressantes lorsqu'il est ouvert. Il est référencé un peu partout maintenant.

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

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

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

    }
});

a fonctionné comme un champion...

Répondu el 28 de Janvier, 2011 par Utilisateur non enregistré (0 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: