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

Question

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

0

У меня есть страница, которая использует элементы управления 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? Он работает с вкладкой

благодаря

bzamfir 06 янв. 2014, в 23:42

Источник

0

Похоже, вам нужно немного его настроить для выпадающего меню Kendo. Можете ли вы опубликовать, как выглядит ваш код в настоящее время, может быть, создать скрипку ?
Goose 06 янв. 2014, в 22:40
0

Да, но я не знаю, как это сделать. Я обновил пост с кодом и ссылкой на оригинальный ответ, где я получил решение от
bzamfir 07 янв. 2014, в 12:05

Теги:

javascript

jquery

binding

kendo-ui

knockout.js

1 ответ

Ещё вопросы

Похоже, вам нужно немного его настроить для выпадающего меню Kendo. Можете ли вы опубликовать, как выглядит ваш код в настоящее время, может быть, создать скрипку ?
Да, но я не знаю, как это сделать. Я обновил пост с кодом и ссылкой на оригинальный ответ, где я получил решение от

Goose · Accepted Answer · 2014-01-07T17-21-00.000Z

Делая все возможное, не имея образца 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();
}