当输入框聚焦时，使用CSS隐藏提交按钮

Question

问题：我希望我的搜索框（HTML表单）的提交按钮在用户点击文本输入框之前是隐藏的。

HTML:

<div class="views-exposed-form">
 <div class="views-exposed-widgets clearfix">
  <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
   <div class="views-widget">
    <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
     <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
    </div>
   </div>
  </div>
  <div class="views-exposed-widget views-submit-button">
   <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">   
  </div>
 </div>
</div>

我尝试过的方法 我知道在处理CSS时可以使用一些条件。像这样： how-to-affect-other-elements-when-a-div-is-hovered

我的问题现在是我的元素不是直接嵌套在彼此之内的。我已经尝试过一些方法，比如当悬停在包装器div上时显示按钮。

它被隐藏起来：

#block-views-exp-display-products-page .views-submit-button {
  visibility: hidden;
}

现在我需要的是这样的东西：

#edit-search-api-views-fulltext:focus (operator) #block-views-exp-display-products-page .views-submit-button {
  visibility: visible;
}

但是我不知道如何做到这一点。

编辑：

如果有人遇到这个问题，这是我的最终解决方案：

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('click', function(){
         $("#edit-submit-display-products").css("visibility", "visible");
      });
   });
</script>
<script>
   $(document).ready(function() {
      $("#edit-search-api-views-fulltext").on('focusout', function(){
        if (!$("#edit-submit-display-products").is(":hover")) {
          $("#edit-submit-display-products").css("visibility", "hidden");
          }
      });
   });
</script>

当你在输入框外部单击时，这将隐藏按钮，并防止在尝试单击按钮时使其消失。

- JT 1114

---

你的问题暗示了一个仅使用CSS的解决方案。如果这不是必需的，你可以在提交按钮中添加onclick，触发一个JS函数来改变搜索框的可见性。 - Mitchell van Zuylen

说实话，我从未使用过JavaScript，因此如果可能的话，我会专注于仅使用CSS的解决方案。但我猜在JavaScript中完成会比在CSS中寻找解决方法更快。 - JT 1114

是的。一般来说，如果您想在网站上实现交互性（就像这样），我建议使用JS。当然，也有一些例外。 - Mitchell van Zuylen

Answer 1

你可以利用 :focus-within。

:focus-within CSS 伪类表示已接收焦点或包含已接收焦点元素的元素。换句话说，它代表一个元素本身匹配 :focus 伪类或具有被 :focus 匹配的后代元素。（这包括影子树中的后代元素。）

^MDN

不过，支持非 IE/Edge。

例如：

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within + .views-submit-button input {
  visibility: visible
}

.views-submit-button input {
  visibility: hidden
}

.views-exposed-widget:focus-within+.views-submit-button input {
  visibility: visible
}

<div class="views-exposed-form">
  <div class="views-exposed-widgets clearfix">
    <div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
      <div class="views-widget">
        <div class="form-item form-type-textfield form-item-search-api-views-fulltext">
          <input placeholder="Search" type="text" id="edit-search-api-views-fulltext" name="search_api_views_fulltext" value="" size="26" maxlength="128" class="form-text">
        </div>
      </div>
    </div>
    <div class="views-exposed-widget views-submit-button">
      <input type="submit" id="edit-submit-display-products" name="" value="Apply" class="form-submit">
    </div>
  </div>
</div>

- Paulie_D

---

完全正常运作。然而，由于网页需要IE/Edge支持，我可能需要采用JavaScript解决方案。 - JT 1114

@Roberrrt 实际上是的...但这是唯一的一个。 - Paulie_D

Answer 2

您可以添加JavaScript（jQuery）来解决此问题：

<script src="code.jquery.com/jquery-latest.min.js"></script>

<script>
 $(document).ready(function() {
    $("#edit-search-api-views-fulltext").on('click', function(){
       $("#edit-submit-display-products").css("visibility", "visible");
    });
 });
</script>

- David

---

你只需要在HTML头部添加两个脚本标签：<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script>$("#edit-search-api-views-fulltext").on('click', function(){ $("#edit-submit-display-products").css("visibility", "visible"); }); </script> - David

我已将其复制到我的模板中。重新加载页面后，它抛出了2个错误（无法获取路径）。我将您的链接路径更改为https://code...，然后再次尝试。现在当我检查源代码时，我只看到第一个脚本。 - JT 1114

对我来说，你的脚本中似乎存在语法错误（<script> scr=）和一个拼写错误 </scrpit>，即使修复了这些错误，它仍然无法正常工作。我现在可以在代码中看到脚本，但它似乎并没有起作用。 - JT 1114

我修改了我的回答。只需将其复制并粘贴到您的<head>中，它就会起作用。 - David

抱歉，我忘了一个重要的元素（documentreadyfunction），现在它应该可以工作了！但如果还是不行，我无能为力。 - David