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 1.9 est sorti et il ne semble pas y avoir de correctif. La tentative d'empêcher le focus de la première zone de texte par certaines des méthodes suggérées ne fonctionne pas dans la version 1.9. Je pense que c'est parce que les méthodes qui tentent de brouiller le focus ou de le déplacer se produisent APRÈS que la zone de texte de la boîte de dialogue a déjà obtenu le focus et fait son sale boulot.

Je ne vois rien dans la documentation de l'API qui me fasse penser que quelque chose a changé en termes de fonctionnalité attendue. Je vais ajouter un bouton d'ouverture...

Answer 2

J'ai eu un problème similaire. Sur ma page, la première entrée est une zone de texte avec un calendrier jQuery UI. Le deuxième élément est un bouton. Comme la date a déjà une valeur, j'ai mis le focus sur le bouton, mais j'ai d'abord ajouté un déclencheur pour le flou sur la zone de texte. Cela résout le problème dans tous les navigateurs et probablement dans toutes les versions de jQuery. Testé dans la version 1.8.2.

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
    <label style="float: left;">@Translation.StatisticsChooseDate</label>
    @Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time",  @tabindex=1 })
    <input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips"  tabindex="2"/>
}

<script type="text/javascript">
$(document).ready(function () {        
    $("#SelectDate").blur(function () {
        $("#SelectDate").datepicker("hide");
    });
    $("#ButtonStatisticsSearchTrips").focus();

});

Answer 3

Ceci est très important pour les smartphones et les tablettes, car le clavier s'affiche lorsqu'une entrée a le focus. C'est ce que j'ai fait, ajouter cette entrée au début de la div :

<input type="image" width="1px" height="1px"/>

Ne fonctionne pas avec la taille 0px . Je suppose que c'est encore mieux avec une vraie image transparente, soit .png ou .gif mais je n'ai pas essayé.

Fonctionne bien jusqu'à présent sur l'iPad.

Answer 4

Vous pouvez ajouter ce :

...

dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){                  // There is new line
  $("#txtStartDate").focus();
  }
});

...

Answer 5

Comme première entrée : <input type="text" style="position:absolute;top:-200px" />