L'interfaccia utente di JQuery Datepicker perde attenzione quando si seleziona la data con il mouse

Question

Sto usando l'interfaccia utente di JQuery con datepicker e quando un utente accede a un campo, viene visualizzato in modo appropriato il calendario.

1. Schede utente (tramite chiave sul campo
2. L'utente seleziona la data con il clic del mouse
3. Schede utente
4. Tabindex ricomincia da uno (all'inizio del modulo)

Ecco il codice. (Potrebbe anche essere impostato l'indice di tabulazione)

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

Il codice jquery è:

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

Qualche suggerimento su come potrei fare per risolvere questo problema (bonus alla soluzione più breve)?

Answer 1

Iscriviti all'evento onClose o onSelect :

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

O nel caso di onClose :

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

Answer 2

Grazie per il suggerimento Jeff, ho modificato la funzione onSelect per utilizzare il filtro degli attributi per recuperare solo gli elementi con il tabindex specificato da "nexttab".

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

PS: Se non hai tabindexes specificato nel tuo codice, come ho trascurato di fare prima, aggiungi semplicemente il seguente codice:

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

Answer 3

Vedi la discussione su questo problema su http://bugs.jqueryui.com/ticket/7266 con una soluzione a http://jsfiddle.net/lankarden/9FtnW/

Answer 4

Simile all'approccio di Jimmy, ma questo mette a fuoco l'icona del calendario (supponendo che il tuo calendario utilizzi un'icona), ho trovato in questo modo più appropriato quando avevo più selettori di date uno accanto all'altro.

Imposta le opzioni predefinite per la data in modo che si focalizzino sull'icona quando si chiude il popup del calendario:

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

Aggiungi un tag all'icona del calendario in modo che sia focalizzabile:

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

Answer 5

Se in realtà non ti interessa l'ordine delle schede, ovvero se non ti è stato assegnato in modo che segua il flusso della pagina, potresti fare qualcosa del genere.

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

Funziona sul presupposto che quando l'utente seleziona la data, ha finito con quel campo e passa a quello successivo, quindi seleziona semplicemente il campo successivo.

Answer 6

Probabilmente puoi usare l'evento onClose per riportare lo stato attivo sul tuo input quando lo datepicker si chiude, poiché this si riferisce al campo di input associato in quel callback. Ad esempio:

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

Answer 7

Se si concentra sulla stessa casella, alla fine viene visualizzato il selettore di date e ciò che vogliamo davvero è che passi al campo successivo. Ecco la soluzione ideata:

1. Richiede l'attributo tabindex nei tuoi campi.
2. Questo è il casting da una stringa a int in javascript (il * 1).

3. Questo in realtà sposta il campo selezionato sull'elemento successivo, invece dell'attuale focus

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

Sono apprezzati tutti i suggerimenti per migliorare questa tecnica.

Answer 8

Ho dovuto risolvere anche questo problema e ho scoperto che le risposte fornite non erano esattamente quello che stavo cercando. Ecco cosa ho fatto.

Un blog menzionato un jQuery funzione che ti consentirebbe di selezionare l'elemento modulo successivo sullo schermo. L'ho importato nel mio progetto e l'ho chiamato Chiudi la finestra di dialogo Datepicker.

Nel caso in cui il collegamento si interrompa, ecco la funzione

$.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;
    });
};

Quindi lo ha semplicemente chiamato onClose of the datepicker

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

Spero che questo aiuti i futuri visitatori.

Answer 9

Sono stato in grado di focalizzare l'attenzione sul campo di input successivo dopo aver premuto Invio (che seleziona la data odierna per impostazione predefinita) o facendo clic su una data dal calendario utilizzando questo

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

Questo potrebbe essere necessario per focalizzare l'attenzione sul prossimo input di testo nel caso in cui tu abbia un pulsante di selezione o di input nel modo "quot" &

$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')