Question

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

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

我设法在两个视口尺寸上设置搜索字段的样式，但是，我不确定如何在没有它的情况下覆盖搜索按钮以显示输入框提交搜索查询。我想在用户在大于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，你的文本字段是“my-text-field”的id，你的提交按钮是“my-submit”的id，以使JS更清晰。< / p>

$(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及更高版本......

Bootstrap - 响应式搜索按钮

1 个答案: