在外部单击时如何隐藏输入？

Question

I have a use case where a user clicks on a search icon, and it display an input.

I want to make it so that when the input is open, anytime you click outside of the input, it hides it.

Of course, I want to keep the toggle I have in place currently as well.

Trying to figure out a solution in vanilla JavaScript, not jQuery.

 ///////////// Nav - Search Functionality // Toggle showing and not showing the input const searchIcon = document.getElementById('search-icon'); const searchInput = document.getElementById('search-input'); searchIcon.addEventListener('click', function() { searchInput.classList.toggle('is-active'); searchInput.classList.toggle('transform-is-active'); }); 

 .is-active { display: block !important; } .is-hidden { display: none !important; } .transform-is-active { width: 200px !important; } #search-input { display: none; margin-right: 10px; transition: all 2s ease; } #search-icon { cursor: pointer; } 

 <!--Search--> <input id="search-input" class="input" type="text" placeholder="Search..."> <img id="search-icon" src="https://static.thenounproject.com/png/101791-200.png" alt="Search" tabindex="0" /> 

Answer 1

I'd use the blur event to capture this:

const searchIcon = document.getElementById('search-icon');
const searchInput = document.getElementById('search-input');

searchIcon.addEventListener('click', function(event) {
  searchInput.classList.toggle('is-active');
  searchInput.classList.toggle('transform-is-active');
  event.stopPropagation();
});

searchInput.addEventListener('blur', function(event) {
  searchInput.classList.remove('is-active');
  searchInput.classList.remove('transform-is-active');
});

More details here: https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Answer 2

Try this, i hope it'll help you out. Thanks

 ///////////// Nav - Search Functionality // Toggle showing and not showing the input const searchIcon = document.getElementById('search-icon'); const searchInput = document.getElementById('search-input'); searchIcon.addEventListener('click', function() { searchInput.classList.toggle('is-active'); searchInput.classList.toggle('transform-is-active'); event.stopPropagation(); }); window.addEventListener('click',function(e){ if(e.target != document.querySelector('div.a')){ searchInput.classList.remove('is-active'); } }); 

 .is-active { display: block !important; } .is-hidden { display: none !important; } .transform-is-active { width: 200px !important; } #search-input { display: none; margin-right: 10px; transition: all 2s ease; position: relative; z-index: 999999; } #search-icon { cursor: pointer; } 

 <!--Search--> <input id="search-input" class="input" type="text" placeholder="Search..."> <img id="search-icon" src="https://static.thenounproject.com/png/101791-200.png" alt="Search" tabindex="0" /> 

Answer 3

There you go. It hide the input when you click the body (outside the icon) and the toggle is preserved.

const searchIcon = document.getElementById('search-icon');
const searchInput = document.getElementById('search-input');

searchInput.addEventListener('click', function(event){
  event.stopPropagation();
});

searchIcon.addEventListener('click', function(event) {
  searchInput.classList.toggle('is-active');
  searchInput.classList.toggle('transform-is-active');
  event.stopPropagation();
});

document.body.addEventListener('click', function(event) {
  searchInput.classList.remove('is-active');
  searchInput.classList.remove('transform-is-active');
  event.preventDefault();
});