javascript - 单击按钮触发输入以显示焦点

Question

我有一个隐藏的搜索栏，当你点击一个按钮时它就会变得可见。当搜索栏出现时，我希望输入已经有焦点，这样用户就可以立即开始输入。

我正在使用 $('#search-input').focus(); 尝试在点击时实现此目的，但它不起作用。

这是一个JSFiddle .单击红色框以触发搜索栏。

我的代码:

$('#search-btn').on('click', function() {
  $(this).toggleClass('active');
  $('#search-input').focus();
  $('#search-wrapper').toggleClass('visible');

  if ($('#region-wrapper').hasClass('visible')) {
    $('#region-wrapper').toggleClass('visible');
  }

  if ($('#region-select').hasClass('active')) {
    $('#region-select').toggleClass('active');
  }
});

#menu-side {
  width: 200px;
  float: right;
  position: static;
  z-index: 10;
  margin-right: 15px;
  margin-top: 15px;
}

#search-btn {
  background: red;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  outline: 0;
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  transition-duration: 0.3s;
  transition-property: all;
}

#search-wrapper {
  width: 100%;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.3s;
  transition-property: all;
}

#search-wrapper.visible {
  opacity: 1;
  visibility: visible !important;
}

#search-inner {
  background: #e5e5e5;
  padding: 35px 80px;
}

#search-input {
  border: none;
  background: none;
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: black;
  float: left;
  width: 90%;
}

#search-submit {
  background: none;
  border: none;
  float: right;
  width: 10%;
  font-size: 1.8rem;
  outline: 0;
  transition-duration: 0.3s;
  transition-property: all;
  cursor: pointer;
  max-width: 21px;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-side" class="clearfix">
  <button id="search-btn" class="float-right js-overlay"><i class="fas fa-search float-right"></i></button>

  <div id="search-wrapper">
    <div class="container">
      <div id="search-inner" class="o-bdr-top">
        <form role="search" method="get" id="search-form" class="clearfix" action="">
          <button id="search-submit"><i class="fas fa-search float-right"></i></button>
          <input type="search" id="search-input" placeholder="What are you looking for?" name="s" class="float-left" />
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

问题在于输入最初是隐藏的，浏览器会阻止诸如聚焦隐藏元素之类的操作。 常见的做法是让组件离开屏幕，而不是使用display: none(IE:固定位置，左负数和不透明度=== 0 或可见性隐藏)。

使用 setTimeout(在本例中是不确定的)是一种不好的做法，应该避免。