Jump to content

.focus() not working on input


Recommended Posts

Hi,

I'm creating a search form that is appearing full screen when clicking on a "search" icon.

The code I have for the HTML is :

<!--SEARCH OVERLAY-->
    <div class="search-overlay">
        <i class="close-search fas fa-times"></i>
        <form>
        <input type="search" id="search" name="search" class="searchbox" placeholder="Rechercher sur le site...">
        </form>
    </div>

and the JQuery

// Search bar
    if($(".search-icon").click(function(){
        $(".search-overlay").addClass("open-search");
        $(".searchbox").focus();
    }));
    if($(".close-search").click(function(){
        $(".search-overlay").removeClass("open-search");
    }));

What I don't understand is that the .focus() is not working at all, but the rest of the code is correct. I tried with a console.log and it just seems to pass through this line like if it doesn't exist.

I tried everything like setTimeOut, placing the focus in another function, etc.

Thank you for your help

Link to post
Share on other sites

Jquery click event to add class and focus, all within a IF condition? Thats a new one! So basically it will return false or true then ...........................................................................................what! Do i do now??? ......................................still waiting.........................................oh i give up!

Someone needs coffee.

Link to post
Share on other sites

Hi,

I removed the if condition, because like you mention, I don't think it was useful for this action. However, I don't understand what you mean by true or false... Well, I understand what it means, but I don't understand why my focus() is returning false (I guess since it's not focusing). From every websites I visited, they are always using .focus() the exact same way I do... It even worked two days ago when I was testing another kind of search bar...

----
Edit

It works now when I add this 

setTimeout(function(){ $('.searchbox'). focus (); }, 500);

I don't know the reason it need a timeout, but now it works.

Edited by Nic727
Link to post
Share on other sites

All if condition, either give a true or false

a=1;

if(a > 0) true

if(a ==0) false.

it determines if the code following it in curly braces is run or filtered more with elseif or else, which usually capture the alternate result, true against if condition false, false against if condition true.

The click event on its own determines what should happen to other elements manipulation on being clicked. A if condition would only be used within the click events own anonymous function.

Like

function(){

if($(".search-overlay").hasClass("open-search")){

$(".search-overlay").removeClass("open-search");

}

}

The only problem i see is if there is multiple search box classes existing, so it would be better to use id reference instead.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...