Question

我有一个使用带有敲除绑定的KendoUI控件的页面，我需要使用Enter而不是Tab来浏览控件。

我设法通过here使用Damien Sawyer发布的解决方案，并按Andre Van Zuydam

的建议使用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 $）

但是，我对kendoUI DropDown列表有疑问。它不是问题或元素，所以它没有得到焦点（相反，它是一个带有特殊类和不可选择的范围=＆＃34; on＆＃34;属性）。

如何更新ko绑定代码以将焦点设置为Enter下拉列表？它适用于Tab

由于

Answer 1

在没有剑道样本的情况下尽力而为我可以对此进行测试，但我认为你应该能够做到这一点。当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();
}

使用带有敲除绑定和KendoUI下拉列表的Enter as Tab

1 个答案: