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

Je viens de découvrir ça en jouant.

J'ai trouvé qu'avec ces solutions pour enlever la mise au point, cela a causé la ESC pour arrêter de fonctionner (c'est-à-dire fermer la boîte de dialogue) lors de la première utilisation de la boîte de dialogue.

Si la boîte de dialogue s'ouvre et que vous appuyez immédiatement sur ESC Si vous avez activé l'option de fermeture de la boîte de dialogue, elle ne la fermera pas (si vous l'avez activée), car le focus est sur un champ caché ou autre, et elle ne reçoit pas d'événements de pression de touche.

La façon dont j'ai résolu le problème était d'ajouter ceci à l'événement d'ouverture pour retirer le focus du premier champ à la place :

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

Cela met l'accent sur la boîte de dialogue, qui n'est pas visible, et ensuite la fonction ESC œuvres clés.

Answer 2

Définissez le tabindex de l'entrée à -1, puis définissez dialog.open pour rétablir le tabindex si vous en avez besoin plus tard :

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});

Answer 3

Ma solution de rechange :

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},

Answer 4

J'avais un contenu qui était plus long que le dialogue. À l'ouverture, la boîte de dialogue se déplaçait vers le premier :tabbable qui se trouvait en bas. Voici ma solution.

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});

Answer 5

Une solution de contournement simple :

Créez simplement un élément invisible avec tabindex=1 ... Cela ne mettra pas en évidence le sélecteur de date ...

eg. :

<a href="" tabindex="1"></a>
...
Here comes the input element