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

StackOverflow https://stackoverflow.com/questions/1401917

  •  05-07-2019
  •  | 
  •  

Question

J'utilise JQuery UI avec Datepicker et lorsqu'un utilisateur appuie sur un champ, il fait apparaître le calendrier en temps voulu.

  1. Onglets de l'utilisateur (via la clé du champ
  2. L'utilisateur sélectionne la date avec un clic de souris
  3. onglets utilisateur
  4. Tabindex recommence à une heure (au début du formulaire)

Voici le code. (Peut aussi avoir le jeu d'index d'onglets) 

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

Le code jQuery est: 

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

Avez-vous des suggestions sur la manière de résoudre ce problème (bonus à la solution la plus courte)?

Était-ce utile?

La solution

Abonnez-vous à l'événement onClose ou à onSelect : 

$("#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();
    }
});

Autres conseils

Merci pour la suggestion Jeff, j'ai modifié votre fonction onSelect afin d'utiliser le filtre d'attribut pour récupérer uniquement les éléments avec le tabindex 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 spécifié de tabindex dans votre code, comme je l'avais négligé auparavant, ajoutez simplement le code suivant: 

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

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

Semblable à l'approche de Jimmy, mais cela 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 l'un à côté de l'autre.

Définissez les options de date par défaut de manière à définir le focus 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 puisse être mise au point: 

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

Si l'ordre des tabulations ne vous intéresse pas, c'est-à-dire si vous ne le faites pas affecter le contenu de la page, vous pouvez faire quelque chose comme ceci. 

jQuery('.date').datepicker({
    'onSelect': function(){
        $(this).nextAll('input, button, textarea, a').filter(':first').focus();
    }
});

Cela fonctionne sur l'hypothèse que lorsque l'utilisateur sélectionne la date, il en a fini avec ce champ et passe au suivant, de sorte qu'il sélectionne simplement le champ suivant.

Vous pouvez probablement utiliser l'événement onClose pour remettre le focus sur votre entrée à la fermeture du sélecteur de date, car this fait référence au champ de saisie associé dans ce rappel. Par exemple: 

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

Le fait de se concentrer sur la même boîte provoque finalement le réaffichage du sélecteur de date et ce que nous souhaitons réellement, c’est qu’il passe au champ suivant. Voici la solution imaginée:

  1. Requiert que l'attribut tabindex soit défini sur vos champs.
  2. Ceci transforme une chaîne en int en javascript (le * 1).

  3. Ceci déplace le champ sélectionné vers l'élément suivant, au lieu du focus actuel 

    $(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(this).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $(":input").each(function(){
              if ($(this).attr("tabindex") == nexttab)
                 $(this).focus();
          });
  }
  });
});

Toutes les suggestions pour améliorer cette technique sont appréciées.

Je devais résoudre ce problème aussi et ai trouvé que les réponses données ne correspondaient pas exactement à ce que je cherchais. Voici ce que j'ai fait.

Un blog a mentionné un jQuery fonction qui vous permettrait de sélectionner le prochain élément de formulaire à l’écran. Je l'ai importé dans mon projet et je l'ai appelé à la fermeture de la boîte de dialogue Datepicker.

Au cas où le lien disparaîtrait, voici la fonction 

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        return false;
    });
};

Puis simplement appelé onFerme du sélecteur de date 

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

J'espère que cela aidera les futurs visiteurs.

J'ai été en mesure de mettre en évidence le champ de saisie suivant après avoir appuyé sur Entrée (qui sélectionne la date du jour par défaut) ou en cliquant sur une date du calendrier à l'aide de cette

. 
$(".jqDateField").datepicker('option', {
    dateFormat: 'mm/dd/y', onClose: function () {
        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
    }
});

Cela peut être nécessaire pour définir le focus sur la prochaine saisie de texte si vous avez un bouton de sélection ou de saisie de la manière "comme" et

. 
$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top