jQuery UI dialogue bouton focus

Lorsqu'une boîte de dialogue de L'interface utilisateur jQuery s'ouvre, elle sélectionne l'un des boutons et le met en surbrillance ou définit 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...

57
demandé sur Agi Hammerthief 2009-11-25 02:11:20

12 réponses

Utilisez la méthode 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>
68
répondu Ed I 2010-02-03 20:15:20

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.

16
répondu Aureltime 2012-12-03 07:08:27

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();
        }
    });
8
répondu Lev 2011-01-08 13:04:28
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.

5
répondu Niklaus 2013-02-26 08:56:32

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

4
répondu 2011-01-28 19:28:01

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

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},
1
répondu silkfire 2013-02-07 10:20:49

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

1
répondu John Bernardsson 2015-03-06 09:51:39

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();
        }
    });
1
répondu Justin 2015-08-11 16:34:52

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>
0
répondu Mgfranz 2013-09-29 16:20:21

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.

0
répondu poleguy 2015-02-13 21:16:50

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>
0
répondu Matt Finucane 2017-06-16 15:31:37

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

0
répondu joalcego 2017-07-21 18:03:50