[SOLVED] Keypress function still triggers fade in fade out when pressing CTRL,SHIFT etc

Keypress function still triggers fade in fade out when pressing CTRL,SHIFT etc

I have a loading overlay and I want it to trigger NOT with CTRL and SHIFT etc. I don't know why this happens. It also triggers when I ALT-TAB back to the website. Which is not what I want to see and also not the client. Also when I hit DELETE it will trigger the overlay. Which is fine only not when the input is empty.

Also what I noticed if I focus inside another searchbar it will also trigger the overlay effect after I searched inside the #keywords input.

$("#keywords").keypress(function(){
// Show loading overlay when ajax request starts
$( document ).ajaxStart(function() {
$('.loading-overlay').fadeIn("fast");
  // $('.loading-overlay').show();
});

// Hide loading overlay when ajax request completes
$( document ).ajaxStop(function() {
$('.loading-overlay').fadeOut("fast");
  // $('.loading-overlay').hide();
});
});

What is going wrong here?

Solution

Fixed it by using the below code:

      if($('#keywords').val().length > 0) {
      $('.loading-overlay').fadeIn("fast");
    } else {
        $('.loading-overlay').hide();
    }

If the input lenght is above zero it will fadeIn and if the lenght is zero (else) it will hide.

I placed this inside the AJAX beforeSend: function () {