JQuery UI DatePicker perde o foco ao selecionar data com o mouse

Question

Eu estou usando jQuery UI com datepicker e quando um usuário o controle sobre a um campo, eles apropriadamente obter o calendário pop-up.

1. guias do usuário (via chave Onto campo
2. O usuário seleciona atualizado com o clique do mouse
3. guias de usuários
4. declarado tabindex no código recomeça em um (no início do formulário)

Aqui está o código. (Pode também ter o conjunto de índice de tabulação)

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

O código jQuery é:

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

Todas as sugestões sobre como eu poderia ir sobre como resolver esta questão (bônus a solução mais curto)?

Answer 1

Inscrever-se para o onClose ou o evento onSelect:

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

Ou, no caso de onClose:

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

Answer 2

Obrigado pela sugestão Jeff, eu modifiquei a função onSelect usar o filtro de atributo para recuperar apenas elementos com o tabindex especificado por "nexttab".

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

PS: Se você não tem tabindexes especificados no seu código, como eu deixou de fazer antes, basta adicionar o seguinte código:

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

Answer 3

Veja a discussão sobre este problema http://bugs.jqueryui.com/ticket/7266 com uma solução a http://jsfiddle.net/lankarden/9FtnW/

Answer 4

Assim como a abordagem de Jimmy, mas isso define o foco para o ícone de calendário (assumindo que o seu calendário utiliza um ícone), achei que esta forma mais adequada quando eu tinha vários selecionadores de data ao lado do outro.

Defina as opções de data padrão para que eles definir o foco para o ícone quando o fecha calendário pop-up:

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

Adicionar um tag para o ícone do calendário de modo que é focusable:

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

Answer 5

Se você realmente não se preocupam com a ordem de tabulação, ou seja, não tê-lo designado por isso segue o fluxo da página, você poderia fazer algo parecido com isso.

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

Ele trabalha com a hipótese de que, quando o usuário seleciona a data, ele está acabado com esse campo e se move para o próximo, de modo que simplesmente seleciona o próximo campo.

Answer 6

Você provavelmente pode usar o evento onClose ao foco de retorno à sua entrada quando os fecha datepicker, como this refere-se ao campo de entrada associado nesse retorno. Por exemplo:

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

Answer 7

Tê-lo concentrar-se na mesma caixa em última análise, faz com que o selecionador de data para pop back-up e o que realmente queremos é para que ele vá para o próximo campo. Aqui está teh solução encontrada:

1. Requer o atributo tabindex a ser definido em seus campos.
2. Este está lançando a partir de uma string para int em javascript (a * 1).

3. Isso realmente move o campo selecionado para o próximo elemento, em vez do foco atual

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

Todas as sugestões para melhorar sobre esta técnica são apreciados.

Answer 8

Eu tive que resolver este problema bem e descobriu que as respostas dadas não eram exatamente o que eu estava procurando. Aqui está o que eu fiz.

A blogue mencionou um jQuery função que lhe permitiria selecionar o próximo elemento de formulário na tela. Eu importado que no meu projeto e chamou-lhe OnClose do diálogo datepicker.

No caso do link vai mortos, aqui é a função

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

Em seguida, basta chamou de OnClose do datepicker

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

Espero que isso ajude os futuros visitantes.

Answer 9

Eu era capaz de obter o foco para o próximo campo de entrada após pressionar enter (que seleciona hoje data por padrão) ou ao clicar em uma data do calendário usando este

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

Esta pode ser obrigado a focagem definida na entrada de texto próxima incase você tem um um botão de seleção de entrada ou no "caminho"

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