Ways to automatically close the search box when the user clicks anywhere within the body

Question

Ways to automatically close the search box when the user clicks anywhere within the body

What I desire At the moment, the search box opens and closes when the font awesome search icon is clicked. However, I also want the option for the search box to close if the user clicks anywhere within the body.

Screenshot

[

My Custom Code

<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</div>
<i class="fa fa-search" onclick="closeSearch()"; ></i>

<script>
function closeSearch() {
  var x = document.getElementById("searchbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

javascript html css

Answer 1

Answer №1

In order to address the mentioned click event instead of focus, the implementation utilized a click event rather than a blur event.

var isSearchBoxVisible = false;
var searchBox = document.getElementById("searchbox");
var skipClose;

function toggleSearchBox() {
  showSearchBox(!isSearchBoxVisible);
  skipCloseFn();
}

function showSearchBox(show=true){
   searchBox.style.display = show ? '' : 'none'; 
   isSearchBoxVisible = show;
}

function skipCloseFn(){
  skipClose = true;
}

showSearchBox(false);

// This can be directly placed in HTML or for the outer search icon.
searchBox.querySelector('input').addEventListener('click', skipCloseFn);
// Add if necessary
searchBox.querySelector('button').addEventListener('click', function(e){
  e.preventDefault();
  skipCloseFn();
});


document.addEventListener('click', function(){
  if(!skipClose){
    showSearchBox(false);
  }
  skipClose = false;
});

<button><i class="fa fa-search" onclick="toggleSearchBox()">icon</i></button>
<br>
<br>
<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit"><i class="fa fa-search">icon</i></button>
    </form>
</div>

Answer 2

In order to address the mentioned click event instead of focus, the implementation utilized a click event rather than a blur event.

var isSearchBoxVisible = false;
var searchBox = document.getElementById("searchbox");
var skipClose;

function toggleSearchBox() {
  showSearchBox(!isSearchBoxVisible);
  skipCloseFn();
}

function showSearchBox(show=true){
   searchBox.style.display = show ? '' : 'none'; 
   isSearchBoxVisible = show;
}

function skipCloseFn(){
  skipClose = true;
}

showSearchBox(false);

// This can be directly placed in HTML or for the outer search icon.
searchBox.querySelector('input').addEventListener('click', skipCloseFn);
// Add if necessary
searchBox.querySelector('button').addEventListener('click', function(e){
  e.preventDefault();
  skipCloseFn();
});


document.addEventListener('click', function(){
  if(!skipClose){
    showSearchBox(false);
  }
  skipClose = false;
});

<button><i class="fa fa-search" onclick="toggleSearchBox()">icon</i></button>
<br>
<br>
<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit"><i class="fa fa-search">icon</i></button>
    </form>
</div>

Answer 3

Answer №2

Implement the onblur event on an input field.

<div id="searchbox">
        <form action="">
            <input type="text" onblur="closeSearch()" name="q">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <i class="fa fa-search" onclick="closeSearch()"; ></i>

Answer 4

Implement the onblur event on an input field.

<div id="searchbox">
        <form action="">
            <input type="text" onblur="closeSearch()" name="q">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <i class="fa fa-search" onclick="closeSearch()"; ></i>

Answer 5

Answer №3

If you're looking for a way to ensure that a click elsewhere on the page is required before closing, there's a simple solution.

<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit><i class="fa fa-search"></i></button>
    </form>
</div>
<i class="fa fa-search" onclick="closeSearch()"; ></i>

<script>
function closeSearch() {
  var x = document.getElementById("searchbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

document.onclick = function closeSearch(e) {
  const searchbox = document.getElementById('searchbox');
  if (!searchbox.contains(e.target) {
    searchbox.style.display = 'none';
  }
}
</script>

Answer 6

If you're looking for a way to ensure that a click elsewhere on the page is required before closing, there's a simple solution.

<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit><i class="fa fa-search"></i></button>
    </form>
</div>
<i class="fa fa-search" onclick="closeSearch()"; ></i>

<script>
function closeSearch() {
  var x = document.getElementById("searchbox");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

document.onclick = function closeSearch(e) {
  const searchbox = document.getElementById('searchbox');
  if (!searchbox.contains(e.target) {
    searchbox.style.display = 'none';
  }
}
</script>

Answer 7

Answer №4

function toggleSearch() {
  var searchBox = document.getElementById("searchbox");
  if (searchBox.style.display === "none") {
    searchBox.style.display = "block";
  } else {
    searchBox.style.display = "none";
  }
}
window.addEventListener('load',function(){
var searchInput = document.querySelector('input[name="q"]');
searchInput.addEventListener('blur',function(event){
document.getElementById("searchbox").style.display="none";
})

});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</div>
<i class="fa fa-search" onclick="toggleSearch()" ></i>

Answer 8

function toggleSearch() {
  var searchBox = document.getElementById("searchbox");
  if (searchBox.style.display === "none") {
    searchBox.style.display = "block";
  } else {
    searchBox.style.display = "none";
  }
}
window.addEventListener('load',function(){
var searchInput = document.querySelector('input[name="q"]');
searchInput.addEventListener('blur',function(event){
document.getElementById("searchbox").style.display="none";
})

});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="searchbox">
    <form action="">
        <input type="text" name="q">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
</div>
<i class="fa fa-search" onclick="toggleSearch()" ></i>

Ways to automatically close the search box when the user clicks anywhere within the body

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

To open a popup menu with a text box, simply click on the text box

Modifying Font Style in Angular 4 Material

Highlighting of Vue directives in HTML within WebStorm

invoke a function through a form in Angular

Deactivate a specific button within a row on a Primeng table by clicking on it

Load images in advance using this script

Is the H1 tag styled differently when located within an article element? Additionally, what is the best way to style multiple paragraphs within a

Having trouble executing the yarn command for clasp login

Vue.JS - Dynamically Displaying Property Values Based on Other Property and Concatenating with

Guide to updating a database using ajax and javascript in asp.net mvc without the need to refresh the page

Discrepancy in functionality between Android and JavaScript Parse API

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

"Creating a navigational bar using Bootstrap in a one-page application

How can I incorporate checkboxes and crosses for validation in AngularJS?

Can you locate the hiding spot of the express-session cookie?

Steps for adding a favicon to Content-Type: application/json

Steps for creating a fade effect between two different elements when the mouse is interacting with one of them

The iPad Overlay fails to fully extend across the screen

"Mastering the art of running a successful Dojo