Le Datepicker de JQuery UI perd le focus lors de la sélection de la date avec la souris

Question

J'utilise l'interface JQuery avec le sélecteur de date et lorsqu'un utilisateur clique sur un champ, il obtient comme il se doit la fenêtre contextuelle du calendrier.

1. Onglets utilisateur (via la clé sur le champ
2. L'utilisateur sélectionne la date par un clic de souris
3. Onglets utilisateur
4. Tabindex recommence à un (au début du formulaire)

Voici le code. (Peut aussi avoir l'indice de tabulation défini)

<input type="text" name="demo" />
<input type="text" class="date" />

Le code jquery est :

$(".date").datepicker();

Avez-vous des suggestions sur la façon dont je pourrais résoudre ce problème (prime à la solution la plus courte) ?

Answer 1

S'abonner à la onClose ou le onSelect événement :

$("#someinput").datepicker(
{
    // other options goes here
    onSelect: function ()
    {
        // The "this" keyword refers to the input (in this case: #someinput)
        this.focus();
    }
});

Ou dans le cas de onClose :

$("#someinput").datepicker(
{
    onClose: function ()
    {
        this.focus();
    }
});

Answer 2

Voir la discussion sur ce problème à l'adresse http://bugs.jqueryui.com/ticket/7266 avec une solution à http://jsfiddle.net/lankarden/9FtnW/

Answer 3

Merci pour la suggestion Jeff, j'ai modifié votre fonction onSelect pour utiliser le filtre d'attributs afin de récupérer uniquement les éléments avec l'indice de tabulation spécifié par "nexttab".

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(el).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $("[tabindex='" + nexttab + "']").focus();
      }
  });
});

PS : Si vous n'avez pas de tabindex spécifié dans votre code, comme j'ai négligé de le faire plus tôt, ajoutez simplement le code suivant :

$('input, select').each(function(i, val){
    $(this).attr('tabindex', i + 1);
});

Answer 4

Similaire à l'approche de Jimmy, mais cette approche met l'accent sur l'icône du calendrier (en supposant que votre calendrier utilise une icône). J'ai trouvé cette méthode plus appropriée lorsque j'avais plusieurs sélecteurs de date les uns à côté des autres.

Définissez les options par défaut de la date de sorte qu'elles mettent l'accent sur l'icône lorsque la fenêtre contextuelle du calendrier se ferme :

    $(".date").datepicker({
        onClose: function() {
            $(this).next('a').focus(); 
        }
    });

Ajoutez une balise à l'icône du calendrier pour qu'elle soit focalisable :

    $(".date").each(function() {
        $($(this).next('img')).wrap($("<A/>").attr("href","#"));
    });

Answer 5

Vous pouvez probablement utiliser le onClose pour renvoyer le focus sur votre entrée lorsque le sélecteur de date se ferme, comme suit this fait référence au champ de saisie associé dans ce rappel. Par exemple :

$('.date').datepicker({
   onClose: function() { this.focus(); }
});