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

156

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>
slolife
la source
cela mettra l'accent même sur une image! les deux aux balises <img> régulières - ainsi que <input type = image>
Simon_Weaver

Réponses:

78

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
slolife
la source
À quoi sert le vote négatif? Si c'était parce que j'ai répertorié 1.9 comme version de correctif, j'ai mis à jour vers 1.10 pour correspondre au ticket.
slolife
1
Je regarde la documentation jquery-ui 1.10 pour Dialog, et je ne la vois pas. J'ai recherché "focusSelector" dans l'API, et ce n'est pas là.
Paul Tomblin
3
La définition du focus sur un élément hors écran fait défiler la fenêtre vers le haut ou le bas jusqu'à cet élément, et cela se produit chaque fois que la fenêtre obtient le focus, pas seulement lors de l'ouverture de la boîte de dialogue. Si j'utilise Firebug pour «inspecter l'élément», puis que je clique à nouveau dans la fenêtre du document, ma fenêtre défile vers le haut ou vers le bas jusqu'à l'élément sur lequel jQuery-UI s'est concentré. La question n'est pas de savoir comment choisir l'élément qui reçoit le focus, mais comment empêcher le focus. Le choix d'un élément différent sur lequel se concentrer ne résoudrait pas le problème.
Vladimir Kornea
4
L'idée que jQuery UI considère que cela est `` corrigé '' est folle. Le correctif consiste à supprimer complètement toute logique de mise au point automatique. Je vous ai demandé d'ouvrir une boîte de dialogue, pas de vous concentrer sur une entrée. Si ennuyant.
AJB
2
fwiw, j'ai ajouté une entrée w / type = "hidden" au-dessus de la première entrée et lui ai ajouté un attribut autofocus. Cela ne veut pas dire ce que vous pensez que cela signifie, mais cela fonctionne pour résoudre ce problème.
jinglesthula
77

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>
Patrick Lee Scott
la source
1
Excellent travail. Aucun js requis, ne change pas la disposition et jquery ui le prend en charge de manière native.
propulsé à vapeur
D'accord, excellent travail. Aussi agréable à savoir sur la classe accessible cachée! Merci!!
user1055761
4
Cela pose des problèmes aux personnes utilisant des technologies d'assistance (par exemple, les lecteurs d'écran)
rink.attendant.6
1
@ rink.attendant.6 quels problèmes?
oxfn
solution incroyable
Pedro Coelho
63

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.

Fabrício Matté
la source
7
Des heures et des heures et des heures et des heures brûlées là-dessus. Mon client vous remercie.
lamarant
1
Cela devrait être la réponse!
briansol
2 jours de recherche pour ces solutions ... rien d'autre n'a fonctionné ... Merci beaucoup!
Legionar
1
Attention: lorsque la boîte de dialogue apparaît, appuyer sur la touche Échap ne fermera pas la boîte de dialogue (tant que vous ne focaliserez pas la boîte de dialogue).
Robert
1
@Robert, au lieu de le remplacer par $.noop, remplacez-le par une fonction qui note la boîte de dialogue active, puis enregistrez un gestionnaire d'événement clé global qui intercepte ESCet ferme la boîte de dialogue 'active' s'il y en a une.
Perkins
28

À 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

feu de soie
la source
27

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.


la source
1
Tabindex = -1 ne m'empêchera-t-il pas d'accéder à la zone de texte?
slolife
2
Merci pour la recherche. Maintenant, je sais que c'est le code qui le fait. Je pourrais faire une suggestion à l'équipe de l'interface utilisateur jQuery pour ajouter une option pour désactiver cette mise au point automatique.
slolife
3
@slolife - Désolé de ressusciter ce fil de discussion très ancien, mais ce ticket indique que le correctif (l' focusSelectoroption) est censé être dans jQueryUI 1.8, et nous sommes maintenant à 1.8.13 et je ne le vois pas dans la documentation de la boîte de dialogue jQueryUI . Qu'est-il arrivé à ça?
Tom Hamming le
Ça ne fait rien. J'avais vu "Milestone changé de TBD à 1.8" dans l'historique des modifications, et je n'avais pas remarqué qu'il indique en fait 1.9 en haut.
Tom Hamming
J'ai un problème similaire, ma solution de contournement est décrite ici - stackoverflow.com/a/12250193/80002
marque le
15

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.

Rob Donovan
la source
3
Cela semble la seule solution de travail, qui n'inclut pas l'ajout de HTML inutile, la suppression de tabindex ou la rupture de la touche ESC.
Bojan Bedrač
10

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");
        }
    });
});
carré rouge
la source
4
Tabindex = -1 ne m'empêchera-t-il pas d'accéder à la zone de texte?
slolife
1
Vous pouvez utiliser un setTimeout pour réinitialiser le tabindex après l'affichage de la boîte de dialogue
redsquare
10

Ma solution de contournement:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  
Thomas
la source
+1. Fonctionne comme un charme en utilisant le :firstsélecteur ou .first()dans FF / Chrome / IE9. Le jeter dans la dialogopenreliure fonctionne aussi.
nickb
Celui-ci m'a amené là aussi. Sauf avec moi, ma boîte de dialogue n'avait aucune entrée, et le premier lien devenait le focus ... j'ai donc ajouté cette option à ma boîte de dialogue jQuery:open: function(){ $('a').blur(); // no autofocus on links }
Marcus
8

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); }
});
l'homme des outils
la source
Cela a fonctionné pour moi, mais j'ai utilisé $('...').blur();au lieu de faire défiler.
Jawa
4
Mon contenu était également très long. flou a supprimé la sélection, mais a laissé la boîte de dialogue défilée vers le bas. scrollTop a fait défiler le contenu vers le haut mais a laissé la sélection. J'ai fini par utiliser $ ('...'). Blur (); $ (this) .scrollTop (0); a travaillé comme un champion.
7

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
Andy
la source
Fonctionne très bien dans ie9 et firefox, mais pas safari / chrome.
tuseau
3

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;
}

la source
2

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

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });
Jay Dubal
la source
1

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.

RaYell
la source
1
malheureusement cela ne fonctionne pas. Je ne sais pas si c'est une chose IE, ou une chose d'interface utilisateur jquery. mais même si vous déplacez le focus vers autre chose par programme, le calendrier reste ouvert.
Patricia
1

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.

Manuel Leuenberger
la source
1

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.

Roc
la source
1

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);
};
marque
la source
Cela peut être étendu pour n'affecter que des dialogues spécifiques en utilisant l'option 'dialogClass' dans .dialog () et en modifiant ce qui précède: ne pas filtrer pour inclure votre classe. par exemple: not (.ui-dialog.myDialogClass)
Andrew Martinez
1

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.

MikeF
la source
1

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.

mikhail-t
la source
1

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>

Sam
la source
0

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;" />
TTCG
la source
0

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

BMiner
la source
0

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(); }
});
nickb
la source
0

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

daniloquio
la source
0

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();
user1443069
la source
0

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 ...

Pixelda
la source
Le correctif a maintenant été poussé à 1.10 selon le ticket jQuery: bugs.jqueryui.com/ticket/4731
slolife
0

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

});   

user1698635
la source
0

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.

Ángel Arbeteta
la source
-1

Vous pouvez ajouter ceci:

...

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

...

Khofidin Ofid
la source
3
Il demande comment empêcher la concentration, pas l'ajouter.
CBarr
-2

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

user2816796
la source