JQuery UI Datepicker verliert Fokus, wenn Datum mit Maus auswählen

Question

Ich bin mit jQuery UI mit picker und wenn ein Benutzer Registerkarten auf ein Feld, sie entsprechend den Kalender Pop-up erhalten.

1. Benutzer Registerkarten (via Taste auf Feld
2. Der Benutzer wählt Datum mit Mausklick
3. User Tabs
4. Tabindex beginnt über an einem (am Anfang der Form)

Hier ist Code. (Kann auch auf die Registerkarte Index gesetzt haben)

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

Der jQuery-Code lautet:

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

Alle Vorschläge, wie ich über die Lösung dieses Problems (Bonus auf kürzeste Lösung) gehen könnte?

Answer 1

Melden Sie sich an den onClose oder onSelect Ereignisse:

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

oder im Fall von onClose:

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

Answer 2

Danke für die Anregung Jeff, ich geändert Ihre onSelect Funktion der Attributfilter zu verwenden, nur Elemente mit dem tabindex spezifiziert durch „NextTab“.

abrufen

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

PS: Wenn Sie nicht tabindexes in Ihrem Code angegeben haben, wie ich früher zu tun vernachlässigt, fügen Sie einfach den folgenden Code:

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

Answer 3

Siehe Diskussion über dieses Problem bei http://bugs.jqueryui.com/ticket/7266 mit einer Lösung bei http://jsfiddle.net/lankarden/9FtnW/

Answer 4

ähnlich wie Jimmys Ansatz, aber dies setzt den Fokus auf das Kalendersymbol (Ihren Kalenders unter der Annahme verwendet einen Icon), fand ich auf diese Weise besser geeignet, wenn ich mehrere Datumsauswahl hatte nebeneinander.

Stellen Sie das Datum Standardoptionen, so dass sie auf das Symbol konzentrieren gesetzt, wenn der Kalender Popup schließt:

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

einen Tag im Kalender-Symbol hinzufügen, so dass es fokussierbarem:

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

Answer 5

Wenn Sie wirklich über die Tab-Reihenfolge sich nicht, das heißt, nachdem es nicht zugeordnet, so dass es den Fluss der Seite folgt, können Sie etwas tun könnte.

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

Es geht davon aus, dass, wenn der Benutzer das Datum auswählt, er mit diesem Bereich beendet ist, und bewegt sich auf den nächsten auf, so wählt er einfach das nächste Feld.

Answer 6

Sie können sich wahrscheinlich die onClose Ereignis verwenden Fokus auf Ihre Eingabe zurückzukehren, wenn die Datepicker schließt, wie this in diesem Rückruf an die zugehörige Eingabefeld bezieht. Zum Beispiel:

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

Answer 7

Nachdem es auf dem gleichen Feld konzentrieren bewirkt letztlich die Datumsauswahl zurück bis Pop und was wir wirklich wollen, ist es zum nächsten Feld zu gehen. Hier ist teh erdacht Lösung:

1. Erfordert das tabindex-Attribut auf Feldern eingestellt werden.
2. Dies wird aus einem String Gießen in Javascript (die * 1) in int.

3. Das tatsächlich bewegt das ausgewählte Feld auf das nächste Element anstelle des aktuellen Fokus

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

Alle Vorschläge zu dieser Technik zu verbessern, werden geschätzt.

Answer 8

Ich hatte dieses Problem auch zu lösen, und fanden heraus, dass die gegebenen Antworten waren nicht genau das, was ich suchte. Hier ist, was ich getan habe.

Blog erwähnt ein jQuery Funktion, die Sie erlauben würde, das nächste Formularelement auf dem Bildschirm auszuwählen. Ich importierte, dass in meinem Projekt und nannte es onClose des Datepicker-Dialog.

Falls der Link tot geht, hier ist die Funktion

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

Dann einfach nannte es onClose der Datepicker

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

Hope, das hilft zukünftige Besuchern.

Answer 9

Ich war in der Lage, den Fokus auf das nächste Eingabefeld zu erhalten, nachdem die Enter-Taste (das heutige Datum standardmäßig wählt) oder wenn sie unter Verwendung diesen ein Datum aus dem Kalender klicken

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

Dies kann erforderlich sein Fokus auf der nächsten Texteingabe setzen einhüllen Sie eine ausgewählte oder eine Eingabe-Taste in der „Weg“ haben

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