Empêcher la boîte de dialogue de l'interface utilisateur jQuery de définir le focus sur la première zone de texte

J'ai configuré une boîte de dialogue modale de l'interface utilisateur jQuery à afficher lorsqu'un utilisateur clique sur un lien. Il y a deux zones de texte (je n'affiche que le code pour 1 par souci de concision) dans cette balise div de boîte de dialogue et elle est modifiée pour devenir une zone de texte jQuery UI DatePicker qui réagit au focus.

Le problème est que la boîte de dialogue de l'interface utilisateur jQuery (`` ouverte '') déclenche en quelque sorte la première zone de texte d'avoir le focus, ce qui déclenche alors 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 produire 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>

jQuery UI 1.10.0 Changelog répertorie le ticket 4731 comme étant corrigé.

On dirait que focusSelector n'a pas été implémenté, mais une recherche en cascade de divers éléments a été utilisée à la place. À partir du billet:

Étendez la mise au point automatique, en commençant par [autofocus], puis: contenu tabulé, puis volet de boutons, puis bouton de fermeture, puis boîte de dialogue

Alors, marquez un élément avec l' autofocusattribut et c'est l'élément qui devrait obtenir le focus:

<input autofocus>

Dans la documentation , la logique du focus est expliquée (juste sous la table des matières, sous le titre 'Focus'):

Lors de 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' autofocusattribut
2. Le premier :tabbableélément dans le contenu du dialogue
3. Le premier :tabbableélément dans le bouton de la boîte de dialogue
4. Le bouton de fermeture de la boîte de dialogue
5. Le dialogue lui-même

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

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

Dans jQuery UI> = 1.10.2, vous pouvez remplacer la _focusTabbableméthode prototype par une fonction placebo:

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

Violon

Cela affectera tous les dialogs de la page sans qu'il soit nécessaire de les modifier manuellement.

La fonction d'origine ne fait rien d'autre que définir le focus sur le premier élément avec l' autofocusattribut / tabbableélément / ou revenir au dialogue lui-même. Comme son utilisation consiste simplement à mettre l'accent sur un élément, il ne devrait y avoir aucun problème à le remplacer par un noop.

À partir de jQuery UI 1.10.0, vous pouvez choisir l'élément d'entrée sur lequel vous concentrer à l'aide de l' autofocus d' attribut HTML5 .

Tout ce que vous avez à faire est de créer un élément factice comme première entrée dans la boîte de dialogue. Cela absorbera l'attention pour vous.

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

Cela 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

J'ai trouvé le code suivant la fonction de dialogue de l'interface utilisateur jQuery pour ouvrir.

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

Vous pouvez contourner le comportement jQuery ou modifier le comportement.

tabindex -1 fonctionne comme une solution de contournement.

Je viens de comprendre cela en jouant.

J'ai trouvé avec ces solutions pour supprimer le focus, a provoqué l' ESCarrêt de la touche (c'est-à-dire fermer la boîte de dialogue) lors de la première entrée dans la boîte de dialogue.

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

La façon dont je l'ai corrigé était d'ajouter ceci à l'événement open pour supprimer le focus du premier champ à la place:

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

Cela définit le focus sur la boîte de dialogue, qui n'est pas visible, puis la ESCclé fonctionne.

Définissez le tabindex de l'entrée sur -1, puis définissez dialog.open pour restaurer 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");
        }
    });
});

Ma solution de contournement:

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

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

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

Solution de contournement simple:

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

par exemple.:

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

Voici la solution que j'ai implémentée après avoir lu le ticket d'interface utilisateur jQuery # 4731 , initialement publié par slolife en réponse à une autre réponse. (Le ticket a également été créé par lui.)

Tout d'abord, quelle que soit la méthode que vous utilisez pour appliquer la saisie semi-automatique à la page, ajoutez la ligne de code suivante:

$.ui.dialog.prototype._focusTabbable = function(){};

Cela désactive le comportement de "mise au point automatique" de jQuery. Pour vous assurer que votre site reste largement accessible, encapsulez vos méthodes de création de boîte de dialogue afin que du code supplémentaire puisse être ajouté, et ajoutez un appel pour focaliser le premier élément d'entrée:

function openDialog(context) {

    // Open your dialog here

    // Usability for screen readers.  Focus on an element so that screen readers report it.
    $("input:first", $(context)).focus();

}

Pour améliorer l'accessibilité lorsque les options de saisie semi-automatique sont sélectionnées via le clavier, nous remplaçons le rappel de saisie semi-automatique "select" de jQuery UI et ajoutons du code supplémentaire pour garantir que textElement ne perd pas le focus dans IE 8 après avoir effectué une sélection.

Voici le code que nous utilisons pour appliquer la saisie semi-automatique aux éléments:

$.fn.applyAutocomplete = function () {

    // Prevents jQuery dialog from auto-focusing on the first tabbable element.
    // Make sure to wrap your dialog opens and focus on the first input element
    // for screen readers.
    $.ui.dialog.prototype._focusTabbable = function () { };

    $(".autocomplete", this)
        .each(function (index) {

            var textElement = this;

            var onSelect = $(this).autocomplete("option", "select");
            $(this).autocomplete("option", {
                select: function (event, ui) {
                    // Call the original functionality first
                    onSelect(event, ui);

                    // We replace a lot of content via AJAX in our project.
                    // This ensures proper copying of values if the original element which jQuery UI pointed to
                    // is replaced.
                    var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
                    if ($hiddenValueElement.attr("value") != ui.item.value) {
                        $hiddenValueElement.attr("value", ui.item.value);
                    }

                    // Replace text element value with that indicated by "display" if any
                    if (ui.item.display)
                        textElement.value = ui.item.display;

                    // For usability purposes.  When using the keyboard to select from an autocomplete, this returns focus to the textElement.
                    $(textElement).focus();

                    if (ui.item.display)
                        return false;

                }
            });
        })
        // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
        .on("autocompleteopen", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = true;
        })
        .on("autocompleteclose", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = false;
        });

    return this;
}

Vous pouvez fournir cette option pour concentrer le bouton de fermeture à la place.

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });

Cela peut être un problème de comportement du navigateur et non de plugin jQuery. Avez-vous essayé de supprimer le focus par programme après avoir ouvert la fenêtre contextuelle.

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

    // you may want to change the selector below
    $('input,textarea,select').blur();

    return false;
});

Je n'ai pas testé cela mais devrait fonctionner correctement.

J'avais le même problème et je l'ai résolu en insérant une entrée vide avant le sélecteur de date, qui vole le focus à chaque fois que la boîte de dialogue est ouverte. Cette entrée est masquée à chaque ouverture de la boîte de dialogue et réapparue à la fermeture.

Eh bien, c'est cool que personne n'ait trouvé la solution pour l'instant, mais il semble que j'ai quelque chose pour toi. La mauvaise nouvelle est que la boîte de dialogue attrape le focus dans tous les cas, même si aucune entrée et aucun lien ne se trouvent à l'intérieur. J'utilise la boîte de dialogue comme info-bulle et je dois absolument rester concentré sur l'élément d'origine. Voici ma solution:

utiliser l'option [autoOpen: false]

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

Alors que la boîte de dialogue est invisible, le focus n'est défini nulle part et reste à son emplacement d'origine. Il fonctionne pour les info-bulles avec juste un texte brut, mais n'a pas été testé pour les boîtes de dialogue plus fonctionnelles où il peut être important d'avoir une boîte de dialogue visible au moment de l'ouverture. Cela fonctionnera probablement très bien dans tous les cas.

Je comprends que le message original était juste pour éviter de se concentrer sur le premier élément, mais vous pouvez facilement décider où le focus devrait être après l'ouverture de la boîte de dialogue (après mon code).

Testé dans IE, FF et Chrome.

J'espère que cela aidera quelqu'un.

A mon avis cette solution est très sympa:

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

Trouvé ici: impossible-de-supprimer-autofocus-in-ui-dialog

J'ai le même problème. J'ouvre une boîte de dialogue d'erreur lorsque la validation échoue et qu'elle saisit le focus, tout comme Flugan le montre dans sa réponse . Le problème est que même si aucun élément à l'intérieur de la boîte de dialogue ne peut être tabulé, la boîte de dialogue elle-même est toujours focalisée. Voici le code original non minimisé 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. Le plus ennuyeux est que la première réaction de l'utilisateur est de frapper le retour arrière pour supprimer le dernier caractère, mais à la place, il est invité à quitter la page, car le retour arrière est frappé en dehors d'un contrôle d'entrée.

J'ai trouvé que la solution de contournement suivante fonctionne assez bien pour moi:

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

Je cherchais un problème différent mais la même cause. Le problème est que la boîte de dialogue met le focus sur le premier <a href="">.</a>qu'elle trouve. Donc, si vous avez beaucoup de texte dans votre boîte de dialogue et que des barres de défilement apparaissent, vous pourriez avoir la situation où la barre de défilement défilera vers le bas. Je pense que cela corrige également la question des premières personnes. Bien que les autres le fassent aussi.

Le correctif 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 lancé

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

Ce qui précède n'aura rien de focalisé et les barres de défilement resteront en haut à sa place. L' <a>objet obtient le focus mais est ensuite masqué. L'effet global est donc l'effet souhaité.

Je sais que c'est un vieux fil, mais en ce qui concerne les documents de l'interface utilisateur, il n'y a pas de solution à ce problème. Cela ne nécessite pas de flou ni de mise au point pour fonctionner. Je ne sais pas si c'est le plus élégant. Mais cela a du sens et est facile à expliquer à n'importe qui.

Si vous n'avez qu'un seul champ sous la forme de la boîte de dialogue Jquery et que c'est celui qui a besoin de Datepicker, vous pouvez également définir le focus sur le bouton Fermer (croix) de la boîte de dialogue dans la barre de titre de la boîte de dialogue:

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

Appelez cette boîte de dialogue APRÈS avoir été initialisée, par exemple:

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

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

Si vous utilisez des boutons de dialogue, définissez simplement l' autofocusattribut 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>

J'ai le même problème.

La solution de contournement que j'ai faite est d'ajouter la zone de texte factice en haut du conteneur de dialogue.

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

Comme mentionné, il s'agit d'un bogue connu avec l'interface utilisateur jQuery et devrait être corrigé relativement bientôt. Jusque là...

Voici une autre option, pour ne pas avoir à jouer avec tabindex:

Désactivez temporairement le sélecteur de date jusqu'à ce que la boîte de dialogue s'ouvre:

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

Travaille pour moi.

Dupliquer la question: comment brouiller la première entrée de formulaire à l'ouverture de la boîte de dialogue

Pour développer certaines des réponses précédentes (et en ignorant l'aspect du sélecteur de date auxiliaire), si vous voulez empêcher l' focus()événement de concentrer le premier champ de saisie lorsque votre boîte de dialogue s'ouvre, essayez ceci:

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

J'ai eu un problème similaire et je l'ai résolu en me concentrant sur la boîte de dialogue après 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

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();

jQuery 1.9 est publié et il ne semble pas y avoir de correctif. Tenter d'empêcher le focus de la première zone de texte par certaines des méthodes suggérées ne fonctionne pas dans 1.9. Je pense que parce que les méthodes tentent de brouiller la mise au point ou de déplacer la mise au point, APRÈS que la zone de texte de la boîte de dialogue ait déjà gagné 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és attendues. Désactivé pour ajouter un bouton d'ouverture ...

J'ai eu un problème similaire. Sur ma page, la première entrée est une zone de texte avec le calendrier de l'interface utilisateur jQuery. Le deuxième élément est le bouton. Comme la date a déjà une valeur, j'ai mis le focus sur le bouton, mais j'ajoute d'abord 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é en 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();

});   

Ceci est vraiment important pour les smartphones et les tablettes car le clavier se lève lorsqu'une entrée a le focus. C'est ce que j'ai fait, ajoutez cette entrée au début du 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 .pngou .gifmais je n'ai pas essayé.

Fonctionne très bien jusqu'à présent sur iPad.

Vous pouvez ajouter ceci:

...

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

...

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