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

Ответ 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();
    }
});

Ответ 2

Спасибо за предложение Jeff, я изменил вашу функцию 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);
});

Ответ 3

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

Ответ 4

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

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

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 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();
            });
    }
    });
  });
  

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

Ответ 8

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

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

Затем просто называется it onClose от datepicker

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

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

Ответ 9

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

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

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

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

Ответ 10

Я добавил пустой тег href рядом с элементом управления вводом datepicker и сосредоточился на нем в обработчике события onClose. Это решило мою проблему смещения фокуса до самого верха страницы, когда календарь был закрыт. Я использую этот тег href для отображения сообщений об ошибках; поэтому это служит двум целям для меня.