javascript - JQuery 忙碌指示器不会禁用键盘事件

Question

我通过以下链接在我的应用程序中集成了一个 Jquery 忙碌指示器:http://www.aspsnippets.com/demos/1331/

它不会让用户在加载时点击输入元素。但是，如果我按 Tab 键，我可以轻松导航到那些输入元素并输入我想要的任何内容，然后按 Enter 按钮发送服务调用。这违背了繁忙指示器的全部目的。知道我该如何解决它吗？

这是CSS:

.busy-modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    .busy-center
    {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
    .busy-center img
    {
        height: 128px;
        width: 106px;
    }

Answer 1

我通过在忙碌指示器上手动禁用键盘输入来修复它。这是我的做法:

在我的 angularJS Controller 中我声明了一个变量来决定是否禁用键盘输入

$scope.disableKeys = false;

然后我添加了以下禁用键盘输入的代码

window.addEventListener('keydown', function (event) {

    if ($scope.disableKeys == true) {
        event.preventDefault();
        return false;
    }
});

这是我的 busyIndi​​cator 函数:

function busyIndicator(type)
{
    if(type == 1)
    {           
        $scope.disableKeys = true;
        $(".busy-modal").show();
    }
    else if (type == 0)
    {
        $scope.disableKeys = false;
        $(".busy-modal").hide();
    }
}

最后，调用这个函数:

//to show busy indicator
busyIndicator(1);

//to hide busy indicator
busyIndicator(0);

就是这样。