Bootstrap - 响应式搜索按钮

Question

我正在开发基于 Bootstrap 4 的 Wordpress 主题（这是一个与我们的主网站类似的博客主题）。

我正在尝试将搜索字段添加到类别导航栏。我想要的是在屏幕宽度为 783 像素或更大的设备上显示搜索输入框和搜索按钮，并且在有屏幕的设备上隐藏搜索输入框（同时保留搜索按钮）宽度为 782 像素或更低。当用户单击搜索按钮时，将显示输入字段。

我已经设法在两种视口大小上设置我想要的搜索字段样式，但是，我不确定如何在不提交搜索查询的情况下覆盖搜索按钮以显示输入框。当用户在大于 783 像素的设备上查看网站时，我希望按钮仍然提交查询。

图片

我的主要难题是如何让搜索按钮在视口大于 783px 时提交表单内容，并在视口小于 782px 时显示搜索框（使用搜索按钮作为切换到搜索框无文字时隐藏/显示，有文字时提交）。

CSS

.agSearch {
    float: right;
    width: 260px;
    padding-left: 60px;
}

.input-group {
    padding-top: 5px;
    padding-bottom: 5px;
}

.form-control {
    width: 100%;
    padding: .375rem .75rem;
    font-size: 11px;
    font-family: 'Lato', sans-serif;
    line-height: 1.5;
    color: #55595c;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #a6a6a6;
    border-radius: 0px;
    height: 32px;
}

.btn {
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0px;
}

.btn-secondary {
    color: #f8f8f8;
    background-color: #a6a6a6;
    border-color: #a6a6a6;
    height: 32px;
}

.btn-secondary.active, .btn-secondary.focus, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover, .open>.btn-secondary.dropdown-toggle {
    color: #f8f8f8;
    background-color: #8d8d8d;
    border-color: #8d8d8d;
}

@media (max-width: 782px) {
.agSearch {
    padding-left: 5px;
}

body > div.category-bar > div > div > form > input[type="text"] {
    display: none;
}

.agSearch {
    width: 32px;
}

.btn-secondary {
        float: right;
}
}

搜索表单 HTML

<form class="search-form input-group" role="search" method="get" action="<?php echo home_url( '/' ); ?>">
  <input type="text" class="form-control" placeholder="<?php _e( 'Search for...', 'bootstrap-four' ); ?>" name="s">
  <span class="input-group-btn">
     <button class="btn btn-secondary" type="submit"><?php _e( '<i class="fa fa-search"></i>', 'bootstrap-four' ); ?></button>
  </span>
</form>

我应该使用一个简单的 JQuery 实现吗？

Answer 1

假设您知道如何将其放置在现有的 javascript/s 中，我们需要执行以下操作：

• 测试当前视口是什么以及是否匹配..
• 我们希望在用户单击提交按钮时进行观察
• 阻止其默认行为，使其不提交
• 仅当文本字段有内容时才提交表单
• 否则切换文本字段的可见性状态

我已经用一些简单的 if 语句写出了一些上面提到的 javascript。请注意，在使用 .matchMedia 时，它必须与您的 CSS 中存在的内容相匹配。我还为您提供了“my-form”的表单 ID，您的文本字段的 ID 为“my-text-field”，您的提交按钮的 ID 为“my-submit”，以使 JS 更易读。

$(document).ready(function(){
  var mq = window.matchMedia( "(max-width: 782px)" );

  if (mq.matches) {
    $('#my-submit').click(function(e){
      e.preventDefault();
      if($('#my-text-field').is(':visible')) {
        if($('#my-text-field').val().length !== 0) {
          $('#my-form').submit();
        } else {
          $('#my-text-field').hide();
        }
      } else {
        $('#my-text-field').show();
      }
    });
  }

});

请注意，这只适用于 IE 10 及更高版本...