0

I have a bottom fixed menu on my site and box with form. I already hide the menu when user is filling the form and keyboard is shown, but it doesn't work as I wish. When user is switching to to fill next input, the menu shows up for a second because of "blur", how to avoid this action?

Shorter version of my code:

        $(".box").on('focus', 'input', function () {
                $(".menu").css("bottom", -1 * $menuHeight);  
        });

        $(".box").on('blur', 'input',  function () {
            $(".menu").css("bottom", 0);
        });

Sample HTML:

        <div class="box">
        <input type="text" maxlength="100" class="custom-input">
        <input type="text" maxlength="100" class="custom-input">
        <input type="text" maxlength="100" class="custom-input"> 
        </div>
         

        <div class="menu" style="position:fixed; display:flex; bottom:0; left:0; right:0; "> 
        menuHTML
        </div>
Nikol
  • 35
  • 10
  • Hi, You can create a class and then make use of ```setTimeout``` and inside ```setTimeout``` add ```toggleClass```. This should work – Himanshu Saxena Feb 26 '21 at 09:27
  • Not tested, but perhaps you could [check which input has focus](https://stackoverflow.com/a/497108/2181514) and if it's still in your box then don't show menu (not tested, probably still gets the blur before the next one has focus (even before focus fires)) – freedomn-m Feb 26 '21 at 10:06
  • Better alternative might be to add a css transition so that your menu doesn't appear immediately (eg slide up/fade-in over a few ms should be enough) – freedomn-m Feb 26 '21 at 10:07

0 Answers0