Используйте Enter as Tab с привязкой к нокауту и ​​выпадающим списком KendoUI

Question

У меня есть страница, использующая элементы управления KendoUI с привязкой к нокауту, и мне нужно использовать Enter вместо Tab, чтобы перемещаться по элементам управления.

мне удалось заставить его работать большой с помощью раствора размещены here по Damien Sawyer и повышения его с Shift-Enter, как предложено Andre Van Zuydam

ko.bindingHandlers.nextFieldOnEnter = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     j$(element).on('keydown', 'input, select', function (e) { 
      var self = j$(this) 
       , form = j$(element) 
       , focusable 
       , next 
      ; 
      var tabElements = 'input,a,select,button,textarea'; 
      if (e.shiftKey) { 
       if (e.keyCode === 13) { 
        focusable = form.find(tabElements).filter(':visible'); 
        prev = focusable.eq(focusable.index(this) - 1); 

        if (prev.length) { 
         prev.focus(); 
        } else { 
         form.submit(); 
        } 
       } 
      } 
      else 
      if (e.keyCode === 13) { 
       focusable = form.find(tabElements).filter(':visible'); 
       var nextIndex = focusable.index(this) === focusable.length - 1 ? 0 : focusable.index(this) + 1; 
       next = focusable.eq(nextIndex); 
       next.focus(); 
       return false; 
      } 
     }); 
    } }; 

(мой код использует J $ вместо $ за JQuery, потому что проект использует также mootools, и я переопределял jquery как j $)

Однако у меня есть проблема с списками Dropdown для kendoUI. Проблема это не или элемент, поэтому он не получает фокуса (вместо этого это диапазон со специальными классами и unselecteable = "on").

Как обновить код привязки ко, чтобы установить фокус на выпадающее меню Enter? Он работает с Tab

Благодаря

Answer 1

Делать лучшее, что я могу без образца Кендо я могу проверить это, но я думаю, что вы должны быть в состоянии достигнуть этого. Когда Kendo создает выпадающий список, как вы сказали, он добавляет кучу других элементов и не получает фокуса так же, как обычный элемент выбора. Однако вы можете выбрать кендо, сначала найдя свой родительский диапазон с классом k-dropdown.

k-dropdown Попробуйте добавить к tabElements как селектор класса:

var tabElements = 'input,a,select,button,textarea,.k-dropdown'; 

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

prev.focus(); 

Попробуйте что-то вроде этого:

if (prev.hasClass('k-dropdown')) { 
    prev.children('select').first().data("kendoDropDownList").focus(); 
} else { 
    prev.focus(); 
}