Как скрыть ввод, когда вы нажимаете за его пределами?

Question

У меня есть случай использования, когда пользователь нажимает на значок поиска, и он отображает ввод.

Я хочу сделать так, чтобы при открытом входе каждый раз, когда вы щелкали за пределами ввода, он скрывал его.

Конечно, я хочу сохранить и тот тумблер, который у меня сейчас есть.

Попытка найти решение в ванильном JavaScript, а не в 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

Я бы использовал событие blur, чтобы захватить это:

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');
});

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Answer 2

Попробуй, надеюсь, это тебе поможет. Спасибо

///////////// 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

Вот, пожалуйста.Он скрывает ввод, когда вы щелкаете тело (за пределами значка), и переключение сохраняется.

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();
});