Фокус встроенный jQuery UI Datepicker для быстрых клавиш?

Question

Я искал сеть для ответа или примера этого, но до сих пор не понял.

jQuery UI дает некоторые замечательные сочетания клавиш для виджета Datepicker, но они работают только в том случае, если виджет открывается после того, как вы фокусируете/нажимаете внутри соответствующего поля ввода.

Я использую «встроенную» версию Datepicker, прикрепленную к тегу div, и пытаюсь найти способ сфокусировать его, поэтому я все еще могу использовать сочетания клавиш, которые являются стандартными для пользовательского интерфейса jQuery. (Доступность клавиатуры)

Кто-нибудь это сделал? Любые советы очень ценятся.

Answer 1

Я не уверен, что я полностью понимаю вопрос, но обычной практикой является добавление tabindex="-1" к элементам перед перемещением фокуса с помощью JavaScript.

Edit:

Хорошо, я посмотрел на это немного дальше. Все события кодовых клавиш фильтруются через оператор управления, который проверяет, установлено ли свойство _datepickerShowing равным true. Это свойство имеет значение false в конструкторе. Единственный способ установить _datepickerShowing истину через _showDatepicker, НО он должен пройти через это:

if (!inst.inline) { 
    // ... 
    $.datepicker._datepickerShowing = true; 

_datepickerShowing также будет установлен в ложь, как только вы попали вкладку.

Я нашел эту статью о том, как Show Hide jQuery UI DatePicker Programmatically, но это, очевидно, предназначено для ввода datepicker и fails a simple test I made with jsfiddle.

Вне разветвления библиотеки или публикации вопроса о github, я думаю, что это потерянное дело.

Возможно, есть способ настроить тип ввода в соответствии с вашими потребностями. Какой именно эффект вы хотите? Всегда показывать?

Answer 2

Для Стивена Харриса, вот пример некоторых из JavaScript я использовал, чтобы сосредоточиться вещи, как предыдущие и следующие по календарю инлайн, и выполнить щелчки с клавишей ввода:

 $(".ui-datepicker td a.calendar-event").attr("tabindex", "0"); 
     $(".ui-datepicker td a.calendar-event").addClass("focus-element-flag"); 
     $("#datepicker").on('keydown', '.calendar-event', function (e) { 
      if (e.which == 13) { 
       $(this).trigger("click"); 
       $(".ui-datepicker-prev").focus(); 
      } 
     }); 

     $("#datepicker").on('keydown', '.ui-datepicker-prev', function (e) { 
      if (e.which == 13) { 
       $(this).trigger("click"); 
       $(".ui-datepicker-prev").focus(); 
      } 
     }); 
     $("#datepicker").on('keydown', '.ui-datepicker-next', function (e) { 
      if (e.which == 13) { 
       $(this).trigger("click"); 
       $(".ui-datepicker-next").focus(); 
      } 
     });