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

Question

Я использую пользовательский интерфейс JQuery с устройством выбора даты, и когда пользователь переходит к полю, у него соответствующим образом появляется всплывающий календарь.

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

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

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

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

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

Answer 3

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

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

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

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

Answer 7

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

<Ол>

Требуется установить атрибут tabindex в ваших полях.

Это приведение от строки к int в JavaScript (* 1).

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

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

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

Answer 8

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

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

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

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

Затем просто назвал его onClose для средства выбора даты

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

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

Answer 9

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

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

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

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