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

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

  

（来自官方文档）请注意仅在可见元素上使用.focus（）。

您只需要等待toggleClass()触发的切换结束，以便#search-input输入可见，那么您可以对输入进行聚焦。

由于toggleClass()方法没有complete回调，因此您可以像这样使用setTimeout()：

setTimeout(function() {
    $('#search-input').focus();
}, 100);

$('#search-input').focus();

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

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

  if ($('#region-select').hasClass('active')) {
    $('#region-select').toggleClass('active');
  }
  setTimeout(function() {
    $('#search-input').focus();
  }, 100);
});

#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 2

问题出在最初被隐藏的输入上，浏览器阻止了诸如针对隐藏元素的操作。 常见的做法是使用组件display: none（例如，固定位置，左侧为负，不透明度=== 0或隐藏可见性），而不是使用off screen。

使用setTimeout（在这种情况下不确定）是坏习惯，应避免使用。

Answer 3

我建议使用display而不是visibility/opacity并切换类，默认情况下，您可以简单地使用display: none然后使用jQuery toggle()方法切换显示焦点将起作用：

$('#search-input').focus();

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

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

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

#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;
  display: none;
  transition-duration: 0.3s;
  transition-property: all;
}

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