JQuery UI Datepicker теряет фокус при выборе даты с помощью мыши

Question

Я использую JQuery UI с DatePicker, и когда пользователь вкладывает в поле, они соответственно получают всплывающий календарь.

1. Вкладки пользователя (через клавишу на поле
2. Пользователь выбирает дату щелчком мыши
3. Вкладки пользователя
4. Tabindex начинается с одного (в начале формы)

Вот код. (Может также быть установлен индекс табуляции)

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

Код jquery:

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

Любые предложения о том, как мне решить эту проблему (бонус к кратчайшему решению)?

Answer 1

Подписаться на событие onClose или onSelect:

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

Или в случае onClose:

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

Answer 2

Смотрите обсуждение этой проблемы на http://bugs.jqueryui.com/ticket/7266 с решением в http://jsfiddle.net/lankarden/9FtnW/

Answer 3

Спасибо за предложение, Джефф, я изменил вашу функцию onSelect, чтобы использовать фильтр атрибутов для извлечения только элементов с tabindex, заданным параметром "nexttab".

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

PS: Если в вашем коде не указаны табличные индексы, как я раньше не делал, просто добавьте следующий код:

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

Answer 4

Аналогично подходу Джимми, но при этом основное внимание уделяется значку календаря (при условии, что ваш календарь использует значок), я нашел этот способ более подходящим, когда у меня было несколько сборщиков дат рядом друг с другом.

Установите параметры по умолчанию для даты, чтобы они устанавливали фокус на значок при закрытии всплывающего календаря:

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

Добавьте метку к значку календаря, чтобы он был в фокусе:

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

Answer 5

Если вы действительно не заботитесь о порядке табуляции, то есть, если он не назначен, чтобы он следовал за ходом страницы, вы можете сделать что-то вроде этого.

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

Он работает в предположении, что когда пользователь выбирает дату, он заканчивает работу с этим полем и переходит к следующему, поэтому он просто выбирает следующее поле.

Answer 6

Мне удалось переместить фокус на следующее поле ввода после нажатия клавиши ввода (которая выбирает текущую дату по умолчанию) или при нажатии на дату в календаре с помощью этого

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

Это может потребоваться для установки фокуса на следующий текстовый ввод, если у вас есть кнопка выбора или кнопка ввода «way»

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

Answer 7

Мне тоже пришлось решить эту проблему, и я обнаружил, что приведенные ответы не совсем то, что я искал. Вот что я сделал.

A blog упомянул функцию jQuery, которая позволит вам выбрать следующий элемент формы на экране. Я импортировал это в свой проект и назвал его onClose диалогового окна datepicker.

В случае, если ссылка не работает, вот функция

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

Тогда просто вызвали его на Close of the datepicker

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

Надеюсь, это поможет будущим посетителям.

Answer 8

Сосредоточение на одном и том же окне в конечном итоге вызывает всплывающее окно выбора даты, и мы действительно хотим, чтобы он перешел к следующему полю. Вот разработанное решение:

1. Требуется установить атрибут tabindex в ваших полях.
2. Это приведение от строки к int в JavaScript (* 1).

3. Это фактически перемещает выбранное поле к следующему элементу вместо текущего фокуса

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

Любые предложения по улучшению этой техники приветствуются.

Answer 9

Вы, вероятно, можете использовать событие onClose для возврата фокуса на ваш ввод при закрытии средства выбора даты, поскольку this относится к соответствующему полю ввода в этом обратном вызове. Например:

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