按Tab键和Shift + Tab时,模态窗口失去焦点

时间:2013-09-03 08:47:57

标签: c# jquery asp.net-mvc kendo-ui

我很难编码并尝试使用不同的方法来捕捉模板窗口打开时的标签和Shift +标签,它会失去焦点并跳转到背景的文本框,

有人可以帮我解决这个问题。感谢

 editwindow = $("#modalWindow").kendoWindow({
        title: "Edit Person Information",
        modal: true,
        visible: false,
        resizable: false,
        width: 600
    }).data("kendoWindow");

然后

<div id="modalWindow" class="main">
     @using (Html.BeginForm("Edit", "People", FormMethod.Post, new { id = "PeopleForm" }))

2 个答案:

答案 0 :(得分:0)

使用此示例

$("#modalWindow").kendoWindow({
close: onClose,
**activate: onActivate**
});

function onActivate(e) {
    var windowElement = this.wrapper,
        windowContent = this.element;

    $(document).on("keydown.kendoWindow", function(e) {
        var focusedElement = $(document.activeElement);
        if (e.keyCode == kendo.keys.TAB && focusedElement.closest(windowElement).length == 0) {
            windowContent.focus();
        }
    });
}

Check This

答案 1 :(得分:0)

我尝试了其他变通办法。我们现在使用的解决方案如下(这是在我们的全局keydown事件处理程序中)。注意 - 我们在这里忽略tabindex值 - 只需识别第一个和最后一个:输入元素。

if (key == kendo.keys.TAB) {
    var $currentOpenWindow = $(".k-window:visible");  // test if there is a window that is currently displayed
    var $inputElements = $currentOpenWindow.find(":input"); // includes buttons
    // if a dialog is currently displayed, don't allow the user to tab out of the dialog into the base form.  Per Casey on 1/2016, we don't need to support nested dialogs.
    if ($currentOpenWindow.length > 0 && $inputElements.length > 0) {
        Utility.log(1, "Enforcing tab within displayed window $currentOpenWindow.length:", $currentOpenWindow.length);
        var isValid = true;
        if (e.shiftKey) {
            if (document.activeElement == $inputElements[0])
                isValid = false;
        }
        else {
            if (document.activeElement == $inputElements[$inputElements.length-1])
                isValid = false;
        }

        if (!isValid) { // Cancel the tab key - this will prevent the browser from changing focus to any other element
            e.stopImmediatePropagation();
            e.preventDefault();
            return false;
        }
    }
}