view raw
Tahreem Iqbal Tahreem Iqbal - 8 months ago 48
AngularJS Question

JQuery busy indicator doesn't disable keyboard events

I have integrated a Jquery busy indicator in my app from this link:

It doesn't let the user click on input elements while loading. But if I press tab I can easily navigate to those input elements and enter whatever I want and press enter on button to send a service call. This defeats the whole purpose of busy indicator. Any idea how I can fix it?

This is the css:

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


I fixed it by manually disabling keyboard input on busy indicator. Here's how I did it:

In my angularJS controller I declared a variable that will decide whether to disable keyboard input or not

$scope.disableKeys = false;

then I added following code that disables keyboard input

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

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

this is my busyIndicator function:

function busyIndicator(type)
    if(type == 1)
        $scope.disableKeys = true;
    else if (type == 0)
        $scope.disableKeys = false;

Finally, calling this function:

//to show busy indicator

//to hide busy indicator

and that's it.