Support » Developing with WordPress » How to hide searchform with blur event?

How to hide searchform with blur event?

  • digiart1975

    (@digiart1975)


    1 month ago

    Hello, guys. I am new to wordpress development. I need to hide the search input clicking outside, but i cant achieve that by any means. Dont know what am doing wrong. Here is the code i am using:

    document.getElementById('fa-button').addEventListener('click', hide = function(){
    document.getElementById('search_area_visible').style.visibility = 'hidden';
    document.getElementById('search_area_hidden').style.visibility = 'visible';
}, false);

document.getElementById('fechar-div').addEventListener('click', hide = function(){
  document.getElementById('search_area_hidden').style.visibility = 'hidden';
  document.getElementById('search_area_visible').style.visibility = 'visible';
}, false);

    I have used a X to close the div, but i would like to close by clicking outside the div. Here is part of the html:

    <span><i id="fa-button" class="fas fa-search"></i></span>
				<div  id="search_area_hidden" class="col-sm-2 d-flex justify-content-end search-area">
							<?php get_search_form(); ?><span id="fechar-div">X</span>
				</div>
				</div>

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • themesjungle

    (@themesjungle)

    1 month ago

    Hi,

    You can use the focusout even to hide it. When the focus will go away from the input it will fire the focusout event and on it you can simply hide your search input accordingly. I hope this will help. You can find the info about the event on this link.

    Kind Regards,

    Thread Starter digiart1975

    (@digiart1975)

    1 month ago

    Hello, thanks for the reply. I have tried to do that. used focusout, mouseout, but did not work. Dont know what am doing wrong. What do i need to change in my code besides changing click to focusout in addEventListener?

    themesjungle

    (@themesjungle)

    1 month ago

    Hi,

    The code looks fine in the first glance you are hiding and showing close button. You can also show an alert as well and add any test message to verify if an event has successfully fired or not. If you see the alert message then it means it is working fine then it might be possible that you are not adding the hiding code properly. You should then check the hiding code. This is how it can be debugged. I have tested on your site console it can hide the input and close when you click outside. I hope this will be helpful.

    jQuery('.search-form input').focusout(function(){
  jQuery(this).hide();
  jQuery('#fechar-div').hide();
})

    Kind Regards,

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Views