c# - 按下 Tab 和 Shift+Tab 时模态窗口失去焦点

Question

我很难编码并尝试不同的方法来了解如何在模态窗口打开时捕获选项卡和 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" }))

Answer 1

使用这个例子

$("#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();
        }
    });
}

检查这个

Answer 2

我尝试了其他解决方法均未成功。我们现在使用的解决方案如下（这是在我们的全局 keydown 事件处理程序中）。注意 - 我们在这里忽略 tabindex 值 - 只是识别第一个和最后一个 :input 元素。

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;
        }
    }
}