Empêcher la boîte de dialogue jQuery UI de mettre le focus sur la première zone de texte

Question

J'ai configuré une boîte de dialogue modale jQuery UI qui s'affiche lorsqu'un utilisateur clique sur un lien. Il y a deux zones de texte (je ne montre que le code de la première pour des raisons de brièveté) dans la balise div dialog et elle est modifiée pour être une zone de texte DatePicker de jQuery UI qui réagit au focus.

Le problème est que la fonction dialog('open') de jQuery UI déclenche en quelque sorte la mise au point de la première zone de texte, ce qui déclenche l'ouverture immédiate du calendrier du sélecteur de date.

Je cherche donc un moyen d'empêcher la mise au point de se faire automatiquement.

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

Answer 1

J'ai le même problème.

La solution que j'ai trouvée est d'ajouter la zone de texte fictive en haut de la boîte de dialogue.

<input type="text" style="width: 1px; height: 1px; border: 0px;" />

Answer 2

Comme indiqué, il s'agit d'un bogue connu de jQuery UI qui devrait être corrigé assez rapidement. En attendant...

Voici une autre option, pour que vous n'ayez pas à vous occuper de tabindex :

Désactivez temporairement le sélecteur de date jusqu'à l'ouverture de la boîte de dialogue :

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

Ça marche pour moi.

Question dupliquée : Comment rendre floue la première entrée du formulaire à l'ouverture de la boîte de dialogue ?

Answer 3

Pour développer certaines des réponses précédentes (et sans tenir compte de l'aspect accessoire du sélecteur de date), si vous voulez empêcher l'affichage de la fonction focus() pour empêcher la mise au point du premier champ de saisie lorsque votre boîte de dialogue s'ouvre, essayez ceci :

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});

Answer 4

J'ai eu un problème similaire et je l'ai résolu en me concentrant sur le dialogue après l'ouverture :

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

Mais dans mon cas, le premier élément est une ancre, donc je ne sais pas si dans votre cas, cela laissera le sélecteur de date ouvert.

EDIT : ne fonctionne que sur IE

Answer 5

trouver dans jquery.ui.js

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus(); 

et remplacer par

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();