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

jQuery UI 1.10.0 Changelog listes ticket 4731 comme étant fixe.

Il semble que le focusSelector n'ait pas été implémenté, mais qu'une recherche en cascade de divers éléments ait été utilisée à la place. Extrait du ticket :

Étendre l'autofocus, en commençant par [autofocus], puis :tabbable content, puis buttonpane, puis close button, puis dialog.

Ainsi, marquer un élément avec l'option autofocus et c'est l'élément qui doit recevoir le focus :

<input autofocus>

Sur la documentation La logique de mise au point est expliquée (juste sous la table des matières, sous le titre "Mise au point") :

À l'ouverture d'une boîte de dialogue, le focus est automatiquement déplacé vers le premier élément qui correspond à ce qui suit :

1. Le premier élément de la boîte de dialogue avec l'élément autofocus attribut
2. Le premier :tabbable dans le contenu de la boîte de dialogue
3. Le premier :tabbable dans le panneau de boutons de la boîte de dialogue
4. Le bouton de fermeture de la boîte de dialogue
5. Le dialogue lui-même

Answer 2

Ajoutez un span caché au-dessus, utilisez ui-helper-hidden-accessible pour le rendre caché par un positionnement absolu. Je sais que vous avez cette classe parce que vous utilisez le dialogue de jquery-ui et qu'elle est dans jquery-ui.

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

Answer 3

Dans la version jQuery UI >= 1.10.2, vous pouvez remplacer la balise _focusTabbable méthode de prototype par une fonction placebo :

$.ui.dialog.prototype._focusTabbable = $.noop;

Violon

Cela affectera tous les dialog dans la page sans avoir à modifier chacun d'eux manuellement.

La fonction originale ne fait rien d'autre que de mettre le focus sur le premier élément avec autofocus attribut / tabbable ou de revenir à la boîte de dialogue elle-même. Comme son utilisation consiste simplement à mettre le focus sur un élément, il ne devrait pas y avoir de problème à le remplacer par une balise noop .

Answer 4

J'ai trouvé le code suivant la fonction de dialogue jQuery UI pour l'ouverture.

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

Vous pouvez soit contourner le comportement de jQuery, soit modifier ce comportement.

tabindex -1 fonctionne comme solution de rechange.

Answer 5

A partir de jQuery UI 1.10.0, vous pouvez choisir l'élément de saisie sur lequel se concentrer en utilisant l'attribut HTML5 autofocus .

Il vous suffit de créer un élément fictif comme première entrée dans la boîte de dialogue. Il absorbera le focus pour vous.

<input type="hidden" autofocus="autofocus" />

Ceci a été testé dans Chrome, Firefox et Internet Explorer (toutes les dernières versions) le 7 février 2013.

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open