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

À mon avis, cette solution est très bien :

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

Trouvé ici : Impossible de supprimer l'autofocus dans la boîte de dialogue de l'interface utilisateur

Answer 2

J'ai un problème similaire. J'ouvre une boîte de dialogue d'erreur lorsque la validation échoue et elle prend le focus, exactement comme Flugan le montre dans son réponse . Le problème est que même si aucun élément à l'intérieur de la boîte de dialogue n'est tabbable, la boîte de dialogue elle-même est toujours focalisée. Voici le code original non modifié de jquery-ui-1.8.23 \js\jquery.ui.dialog.js :

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
  uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
    uiDialog.get()))).eq(0).focus();

Le commentaire est le leur !

C'est vraiment mauvais pour moi pour plusieurs raisons. La chose la plus ennuyeuse est que la première réaction de l'utilisateur est d'appuyer sur la touche d'effacement arrière pour supprimer le dernier caractère, mais au lieu de cela, il est invité à quitter la page, parce que l'effacement arrière est effectué en dehors d'un contrôle d'entrée.

J'ai découvert que la solution de contournement suivante fonctionne très bien pour moi :

jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
  jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};

Answer 3

Je cherchais un autre problème, mais la cause est la même. Le problème est que la boîte de dialogue met l'accent sur le premier élément de la liste. <a href="">.</a> il trouve. Ainsi, si vous avez beaucoup de texte dans votre boîte de dialogue et que des barres de défilement apparaissent, il se peut que la barre de défilement soit déplacée vers le bas. Je pense que cela résout également la question de la première personne. Bien que les autres le fassent aussi.

La solution simple et facile à comprendre. <a id="someid" href="#">.</a> comme première ligne de votre div de dialogue.

EXEMPLE :

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

Où votre dialogue est initié

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

Dans la fenêtre ci-dessus, rien ne sera mis en évidence et les barres de défilement resteront en haut, là où elles doivent être. Le site <a> obtient le focus mais est ensuite caché. L'effet global est donc l'effet désiré.

Je sais qu'il s'agit d'un vieux sujet, mais d'après la documentation de l'interface utilisateur, il n'y a pas de solution à ce problème. Cela ne nécessite pas de flou ou de mise au point pour fonctionner. Je ne suis pas sûr que ce soit le plus élégant. Mais c'est tout simplement logique et facile à expliquer à quiconque.

Answer 4

Si vous n'avez qu'un seul champ sous la forme d'une boîte de dialogue Jquery et que c'est celui qui a besoin du Datepicker, vous pouvez également mettre l'accent sur la boîte de dialogue. Bouton de fermeture (croix) dans la barre de titre du dialogue :

$('.ui-dialog-titlebar-close').focus();

Appelez ceci APRÈS que le dialogue ait été initialisé, par exemple :

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

Parce que le bouton de fermeture est rendu après le .dialog() s'appelle.

Answer 5

Si vous utilisez des boutons de dialogue, il suffit de définir le paramètre autofocus sur l'un des boutons :

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  This is some text.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>