The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link:

However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab key. This allows me to input data and press enter without waiting for the loading process to finish, which defeats the purpose of the busy indicator. Does anyone have any suggestions on how I could address this issue?

Below is the CSS code:

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

Answer №1

I successfully resolved the issue by manually disabling keyboard input on the busy indicator. Here is my approach:

Within my AngularJS controller, I initialized a variable to control the option of disabling keyboard input:

$scope.disableKeys = false;

Then, I implemented the following code snippet to handle the keyboard input disabling:

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

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

This is the function responsible for managing the busy indicator:

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

Finally, I utilized this function as follows:

//to display the busy indicator
busyIndicator(1);

//to hide the busy indicator
busyIndicator(0);

And that concludes the resolution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

comparing multiple values separated by commas with JavaScript

I need validation using a comma-separated value format. Within the illustration, there are two fields: "Saloon Price" (value: 10,10,10,10) and "Saloon Offer Price" (value: 11,11,11,11). The first value must be less than the second. Saloon price Value & ...

javascriptphpjqueryhtml

Functionality of the Parameters Object

As I transition from using the params hash in Rails to learning Node/Express, I find myself confused about how it all works. The Express.js documentation provides some insight: 'This property is an array containing properties mapped to the named rout ...

javascriptnode.jsexpress

Including hyperlink tags within a CSS file

Can you create internal links within a CSS file, like inserting a table of contents at the top where you can click on an item and immediately jump to that section in the CSS file similar to an anchor tag? This feature would be extremely handy for long CSS ...

htmlcss

Responsive HTML and CSS Image Gallery without Clickable Images

As I embark on the creation of an HTML and CSS based Gallery, I am eager to make my images more interactive by enabling them to expand into full-screen mode upon clicking. Is it necessary for me to incorporate additional plugins to achieve this functiona ...

htmlcssstyling

Issue encountered in Angular 2 Heroes Tour, Step 7

I checked multiple forums, but didn't come across any relevant information. After starting the tutorial just 3 days ago and reaching Step 7, I encountered an error when incorporating the InMemoryWebApiModule as instructed in the steps. The error can ...

angularjsangular

Delivering HTML with Python Socket Server

I am currently learning about HTTP/CGI and exploring how to display HTML content on a webpage through the use of the socket library in Python. However, I am encountering some confusion regarding the correct syntax for this task: #!/usr/bin/env python impo ...

pythonhtmlsocketshttp

Determine the overall sum of rows present within this particular tbody section

I am struggling to calculate the total number of tr's within my nested tbody, but I am not getting the correct count. The jQuery code I used is returning a high number like 44 rows instead of the expected 7 rows. Can anyone point out where I might ha ...

javascriptjquerycounthtml-tablerows

Implement a bootstrap modal to pop up upon successful form validation using the formvalidation.io

Dealing with a form that can take a significant amount of time to submit due to posting data to multiple APIs is not uncommon. Normally, I display a message in a bootstrap modal asking the user to wait patiently without clicking the back button. This modal ...

javascriptjquerytwitter-bootstrapformvalidation.io

Transforming a JSON string into an object within a variable amount of nested JSON structures

I'm encountering an issue with modifying JSON strings within JSON objects for varying numbers of objects. Allow me to elaborate further with my code and explanations. I have a factory that supplies JSON objects //Factory for products app.factory(&ap ...

javascriptangularjsjson

Whenever I try to send an email in Node.js, I encounter 404 errors. Additionally,

I have an Angular application with a form that makes AJAX requests. Emailing works fine, but no matter what I set the response to, I get an error for the path '/send'. I assume Node.js expects the path '/send' to render a template or da ...

javascriptangularjsnode.jsexpressnodemailer

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

I'm experiencing an issue where scrolling only works once when the page is initially loaded. I need it to be able to repeat from the beginning each time. <div class="content"> <div class="next-section blue">First Section</div> & ...

jquerycss

What is the best way to divide a Modal Header column into two separate sections?

Is there a way to center the text in the Modal Header and have the H1 and P tags occupy one row each? Applying d-block to each creates two columns. I also tried increasing the Height in the Modal Header without success. If you have a solution, please hel ...

htmlcssbootstrap-5

What are some ways to replicate the experience of a lengthy document loading?

I am interested in conducting tests on JavaScript code that runs both before and after the document is fully loaded. Is there a way to purposely delay my document's loading process (for instance, by 10 seconds) so I can easily observe the effects occ ...

javascripthtmlbrowser

Setting up an application from two years ago

A couple of years back, I embarked on a project that now seems impossible to install in different directories. Initially, these were the steps I followed to set up my Angular frontend: npm install gulp npm install typings npm install typings insta ...

angularjsnpmgulptypescript-typings

Executing $(this).parent().remove() triggers a full page reload

A unique feature of my webpage is that with just a simple click of a button, users have the ability to dynamically add an endless number of forms. Each form contains fields for user input and also includes a convenient delete button. var form = " Name ...

javascriptjqueryhtml

Ways to conceal rows within an implicit grid

In the code snippet below, CSS Grid is used to adjust the number of columns for wider containers. When dealing with narrower containers (such as uncommenting width: 80vw or resizing the example), implicit rows are added (with only two being specified in th ...

htmlcsscss-grid

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Currently, I have a page with five stacked DIVs in a vertical layout. I am wondering if it is necessary to apply the FLOAT property to each DIV to adhere to good coding practices. It appears that there are no issues, such as re-wrapping, in any browser e ...

htmlcss-float

Incomplete JSON response being received

We set up an express server to call an API and successfully requested the JSON object in our server. However, we are facing an issue where the JSON data is getting cut off when being displayed as a complete object on the client side. We tried using parse i ...

javascriptjsonreactjsexpress

The javascript file jquery-ui-1.10.4.custom.js is encountering an issue with the error message 'this.source is not a function'

I am encountering an error while using 'jquery-ui-1.10.4.custom.js' for auto-complete. The error being thrown is 'TypeError: this.source is not a function' Here is the HTML code snippet: <input type="text" ng-model="srchfname" auto ...

jqueryangularjsjquery-uispring-mvc

Regular expressions for identifying operands and operators in a calculator application implemented with JavaScript

I am currently working on a JavaScript project to create a basic calculator. I am in need of a way to validate each item in an array of operands (sequences of digits) and operators (+, -, *, /, ** for power). I have managed to create regex patterns for di ...

javascriptregex