JQuery UI Datepicker pierde el foco al seleccionar la fecha con el mouse

Question

Estoy utilizando la interfaz de usuario de JQuery con el selector de fechas y cuando un usuario hace clic en un campo, aparece el calendario de forma adecuada.

1. Fichas de usuario (a través de la tecla en el campo
2. El usuario selecciona la fecha con un clic del mouse
3. Fichas de usuario
4. Tabindex comienza de nuevo a la una (al comienzo del formulario)

Aquí está el código. (También puede tener el índice de pestaña establecido)

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

El código jquery es:

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

¿Alguna sugerencia sobre cómo podría solucionar este problema (de bonificación a la solución más corta)?

Answer 1

Suscríbase al 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 en el caso de onClose :

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

Answer 2

Gracias por la sugerencia, Jeff, modifiqué tu función onSelect para usar el filtro de atributos para recuperar solo los elementos con el índice de tabulación especificado por " nexttab " ;.

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

PS: Si no tiene tabindexes especificados en su código, como no lo hice antes, simplemente agregue el siguiente código:

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

Answer 3

Vea la discusión sobre este problema en http://bugs.jqueryui.com/ticket/7266 con una solución en http://jsfiddle.net/lankarden/9FtnW/

Answer 4

Similar al enfoque de Jimmy, pero esto establece el foco en el ícono del calendario (asumiendo que su calendario usa un ícono), encontré esta forma más apropiada cuando tuve varios recolectores de fecha uno al lado del otro.

Establezca las opciones predeterminadas de la fecha para que establezcan el foco en el icono cuando se cierre la ventana emergente del calendario:

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

Agregue una etiqueta al icono del calendario para que se pueda enfocar:

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

Answer 5

Si realmente no te importa el orden de tabulación, es decir, no tenerlo asignado, por lo que sigue el flujo de la página, podrías hacer algo como esto.

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

Funciona bajo el supuesto de que cuando el usuario selecciona la fecha, termina con ese campo y pasa al siguiente, por lo que simplemente selecciona el siguiente campo.

Answer 6

Probablemente puede usar el evento onClose para devolver el enfoque a su entrada cuando se cierra el selector de fechas, ya que este se refiere al campo de entrada asociado en esa devolución de llamada. Por ejemplo:

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

Answer 7

Hacer que se centre en el mismo cuadro hace que el selector de fechas vuelva a aparecer y lo que realmente queremos es que pase al siguiente campo. Aquí está la solución ideada:

1. Requiere que se establezca el atributo tabindex en sus campos.
2. Esto está convirtiendo desde una cadena a int en javascript (el * 1).

3. Esto en realidad mueve el campo seleccionado al siguiente elemento, en lugar del foco actual

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

Cualquier sugerencia para mejorar esta técnica es apreciada.

Answer 8

Tuve que resolver este problema también y encontré que las respuestas dadas no eran exactamente lo que estaba buscando. Esto es lo que hice.

Un blog mencionó un jQuery Función que le permitiría seleccionar el siguiente elemento de formulario en la pantalla. Lo importé a mi proyecto y lo llamé en Cerrar el cuadro de diálogo del selector de fecha.

En caso de que el enlace se detenga, aquí está la función

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

Luego simplemente lo llamó onCerrar del selector de fecha

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

Espero que esto ayude a futuros visitantes.

Answer 9

Pude enfocarme en el siguiente campo de entrada después de presionar enter (que selecciona la fecha de hoy de forma predeterminada) o al hacer clic en una fecha del calendario usando esto

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

Esto puede ser necesario para establecer el foco en la siguiente entrada de texto en caso de que tenga un botón de selección o entrada en la forma ""

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