javascript - Bootstrap - 响应式搜索按钮

Question

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

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

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

图片

我的主要问题是如何让搜索按钮在视口(viewport)大于 783px 时提交表单内容，并在视口(viewport)小于 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 中，我们需要执行以下操作:

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

我已经用一些简单的 if 语句编写了一些 javascript，上面说了。请注意，在使用 .matchMedia 时，它必须与您的 CSS 中存在的内容相匹配。我还为您提供了“我的表单”ID，您的文本字段为“我的文本字段”的 ID，您的提交按钮为“我的提交”的 ID，以使 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 及更高版本...