У меня есть страница, которая использует элементы управления KendoUI с привязкой к нокауту, и мне нужно использовать Enter вместо Tab для навигации по элементам управления.
Мне удалось заставить его работать отлично, используя решение, размещенное здесь Дэмиеном Сойером и улучшающее его с помощью Shift-Enter, как было предложено Андре Ван Цуйдамом
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 $ вместо $ for jquery, потому что проект использует также mootools, и я переопределял jquery как j $)
Однако у меня проблема с списками DropDown для kendoUI. Проблема это не или элемент, поэтому он не получает фокуса (вместо этого это диапазон со специальными классами и unselecteable = "on").
Как мне обновить код привязки ко, чтобы установить фокус на раскрывающееся меню Enter? Он работает с вкладкой
благодаря
Делая все возможное, не имея образца Kendo, я могу проверить это, но я думаю, что вы сможете это достичь. Когда Kendo создает выпадающий список, как вы сказали, он добавляет кучу других элементов и не получает фокуса так же, как обычный элемент выбора. Однако вы можете выбрать кендо, сначала найдя свой родительский диапазон с классом k-dropdown
.
Попробуйте добавить k-dropdown
в tabElements
как селектор классов:
var tabElements = 'input,a,select,button,textarea,.k-dropdown';
Затем отрегулируйте ту часть, где вы фокусируетесь, добавив условие для проверки раскрывающегося списка Kendo. Поэтому вместо этого:
prev.focus();
Попробуйте что-то вроде этого:
if (prev.hasClass('k-dropdown')) {
prev.children('select').first().data("kendoDropDownList").focus();
} else {
prev.focus();
}