Mise au point du bouton de dialog de l’interface utilisateur jQuery

Lorsqu’une boîte de dialog d’interface utilisateur jQuery s’ouvre, elle sélectionne l’un des boutons et la met en surbrillance ou lui donne le focus, etc.

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

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

REMARQUE : en guise de solution temporaire, j’ai modifié le CSS pour le .ui-state-focus mais ce n’est pas idéal …

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

   No Focus on jQuery Dialog        Open Dialog 

Confirm that no elements have focus

merci pour les réponses, mais il me semble que la meilleure solution (au moins pour moi, du code minimal et aucune utilisation inutile des méthodes sur le DOM) est de définir vos boutons de dialog dans un tableau d’object:

 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 également un moyen pratique et lisible de donner une identité à vos boutons.

J’ai eu le même problème … Essayer de définir le focus sur un autre élément ne semblait pas faire l’affaire, mais le flou de la mise au sharepoint l’élément sélectionné (dans le callback “open”) a fait:

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

Je suppose qu’un moyen d’empêcher la mise au point sans spécifier un nom spécifique serait d’utiliser un sélecteur avec en premier, 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, alors mon “Supprimer élément?” la confirmation ne supprimerait pas l’article par défaut.

Il est clair que le dialog jQuery fait défiler les zones intéressantes une fois ouvert. 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, le flou supprimera la sélection, mais laissez la boîte de dialog défiler vers le bas. using 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); } }); 

travaillé comme un champion …

C’est ce que je fais habituellement, travaille 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 posterai le mien, qui est basé uniquement sur la substitution CSS. Ce qui me dérangeait, c’était le contour qui faisait que le bouton avait l’air “sélectionné”, alors je me suis contenté de le remplacer 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 append / remplacer tout autre style qui vous dérange 🙂

Base sur les 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(); } }); 

Ou, simplement créer une entrée factice avant d’appeler les autres boutons fonctionne tout aussi bien. Cela fonctionne car l’interface utilisateur recherche simplement la première “entrée” par défaut, en incitant l’interface utilisateur à voir une entrée fausse en premier, le focus est redirigé.

 

Pellentesque habitant morbi sortingstique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ulsortingcies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ulsortingcies mi vitae est. Mauris placerat eleifend leo.

Je suis tombé sur un petit hack pour résoudre ce problème que d’autres peuvent 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 vérifie simplement par programme à nouveau, ce qui semble clarifier le problème.

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

Ajoutez le code suivant comme premier élément dans la DIV que vous désignez comme boîte de dialog.

  

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

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

Vous pouvez l’append dans un fichier javascript partagé et cela empêchera l’autofocus de tous vos dialogs! Plus besoin de copier et coller dans tous vos dialogs