jQuery Datepicker: выберите месяц с ключом закладки

Question

Я застреваю, пытаясь включить событие keydown в кнопку «Следующий месяц» в jQuery datepicker.

Идея состоит в том, чтобы пользователи могли выбирать дату без использования мыши, только табуляции и клавиши ввода.

Я знаю, что есть карта keydown для datepicker (http://hanshillen.github.io/jqtest/#goto_datepicker), но я хочу что-то более легкое и интуитивно понятное. Кстати, на моем Mac нет «страницы вниз», которая зарезервирована для «следующего месяца»), поэтому я не могу перемещаться по датепике, используя эту настройку по умолчанию.

По умолчанию в таблицах «предыдущий месяц» и «следующий месяц» кнопки даже не попадают в фокус. Тем не менее, я могу решить это, добавив атрибут «tabindex» в соответствующий div. Но даже в фокусе кнопка не отвечает на клавишу Enter. Работает только щелчок.

Вот HTML этой части DatePicker:

<a class="ui-datepicker-next ui-corner-all ui-state-hover 
ui-datepicker-next-hover ui-state-active" data-handler="next" 
data-event="click" title="Next" tabindex="1"><span class="ui-icon 
ui-icon-circle-triangle-e">Next</span></a> 

(я добавил классы "ui-state-hover ui-datepicker-next-hover ui-state-active" с помощью моего яваскрипта функции).

Что дальше? Это вопрос изменения data-event="click" на что-то еще? Я попытался это сделать, а также найти соответствующие функции или обработчики в файлах jquery.js и jquery-ui.js, но не удалось. Я действительно плохо знаю передовые javascript и jQuery UI, так как должно быть какое-то простое решение этой проблемы.

Цените любую помощь, спасибо.

P.S. Здесь, в StackOverflow, я читал много обсуждений, но только этот: Focus on jQuery UI Calender accessibility with TAB key, похоже, касается проблемы доступности/табуляции датпикера, и до сих пор ничего не говорится о выборе месяцев.

Answer 1

Я решил опубликовать здесь решение, которое я, наконец, придумал. Я не совсем доволен этим, по-прежнему этот код делает то, что я хотел, а именно:

кнопка

1. «в следующем месяце» входит в фокус при нажатии клавиши Tab ударил
2. на клавишу ввода, пользователь может перейти к в следующем месяце
3. Если это желаемый месяц, то нажатие Tab перемещает фокус на месячные дни (можно получить доступ к нужному дню, последовательно нажав Tab)
4. , если это НЕ желаемый месяц, затем нажмите клавишу ввода. к следующему месяцу, а шаги 3-4 повторяются.

Основная проблема заключалась в том, что после выбора в следующем месяце кнопка «next» на datepicker вышла из фокуса, и даже когда мне это удалось, кнопка не ответила на клавишу Enter. Вероятно, это связано с тем, что нажатие кнопки осуществляется по имени класса, а после изменения месяца в параметре datepicker элемент также относится к изменениям (это, к примеру, не ссылка, а сентябрь, а не октябрь). Итак, пытаясь вызвать событие keydown (Enter) для второго (или третьего, четвертого и т. Д.) Времени на , тот же элемент не работал. Я думаю, что это также почему я не смог использовать this вместо className внутри селекторов jQuery.

Я решил это путем запуска события keydown внутри отдельной функции, которое называет себя.

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

function out_of_focus(id) { 
    $(id).blur(function() { 
     $(this).removeClass("ui-state-active"); 
    }); 
} 

$(".ui-datepicker-next").attr("tabindex", "1"); 
$(".ui-datepicker-next").focus(function() { 
    tabulation(); 
}); 

function tabulation() { 
    $(".ui-datepicker-next").addClass("ui-state-active"); 
    $(".ui-datepicker-next").keydown(function(evt) { 
     if (evt.which == 13) { 
     $.datepicker._adjustDate("#datepicker", +1, "M"); 
     $(".ui-datepicker-next").attr("tabindex", "2"); 
     $(".ui-datepicker-next").focus(); 
     tabulation(); 
     out_of_focus(".ui-datepicker-next"); 
     } 
    }); 
} 
out_of_focus(".ui-datepicker-next"); 

Любые предложения о том, как улучшить это ценят.

Answer 2

Вот мое решение, основанная на том, что якорь метка для следующего/Предыдущего месяца отсутствующей HREF атрибута, причина, по которой они не получают фокус (по крайней мере, в хроме):

$('.js-calendar').datepicker({ 
     inline: true, 
     altField: '.js-date-input', 
     onChangeMonthYear: function (year, month, inst) { 
      setTimeout(function() { 
       // add href to prev/next anchors so that they can receive TAB focus 
       $('.ui-datepicker-prev, .ui-datepicker-next').attr("href", "#"); 
      }, 50); 
     } 
    }); 

// add href to prev/next anchors so that they can receive TAB focus 
$('.ui-datepicker-prev, .ui-datepicker-next').attr("href", "#"); 

Примечания Я добавил hrefs вне вызова datepicker (для первоначальных целей), а также в функции onChangeMonthYear (в противном случае они теряются после изменения месяца).

Примечание: использование jquery-ui-1.11.2