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

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