Question

我正在使用响应式网站标题中的搜索框。

在桌面/平板电脑宽度上，右侧有一个搜索输入字段和一个带样式的“搜索”按钮。您可以输入搜索词，然后点击“搜索”按钮或只需按键盘上的Enter键即可。

缩小到移动宽度时，搜索输入字段会填充屏幕宽度。提交按钮低于它。在桌面上，单击按钮或按Enter键激活搜索。

在实际的iphone手机上，您可以点击“搜索”按钮，但是从屏幕底部升起的原生移动键盘会有一个搜索按钮，其中输入/返回键通常是。它似乎知道我在一个表单中，键盘自动给我提供了通过基本按下ENTER键位置启动搜索的选项....但它说SEARCH。

到目前为止一切顺利。我想我不需要移动设备标题中的按钮，因为它已经在键盘中了。因此，我会在移动宽度上隐藏按钮，一切都会更紧凑，看起来更好。所以我将其添加到我的CSS中以将其隐藏在移动设备中：#search-button {display: none;}

但现在搜索根本不起作用。在移动设备上，我没有得到之前出现的键盘选项，如果我只是按回车键，它根本不起作用。在移动宽度的桌面上，点击输入也不再有效。

通过隐藏提交/搜索按钮可以清楚地看到，手机不再为我提供运行搜索的原生选项。此外，在移动宽度的桌面上，即使点击进入搜索输入框也无法启动搜索。

这是我的搜索框：

<form id="search-form" method="get" accept-charset="UTF-8, utf-8" action="search.php">
<fieldset>
<div id="search-wrapper">
<label id="search-label" for="search">Item:</label>
<input id="search" class="placeholder-color" name="item" type="text" placeholder="Item Number or Description" />
<button id="search-button" title="Go" type="submit"><span class="search-icon"></span></button>
</div>
</fieldset>
</form>

这是我的CSS的样子：

#search-wrapper {
  float: left;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

#search-button {
  display: inline-block;
  cursor: pointer;
  vertical-align: top;
  height: 30px;
  width: 40px;
}

@media only screen and (max-width: 639px) {
  #search-wrapper {
    display: block;
    margin-bottom: 7px;
  }

  #search-button {  
 /* this didn't work....it hid the button but the search failed to load */
  display: none;*/
  }
}

所以......当我在手机屏幕上时，如何隐藏此提交按钮，但仍然可以通过移动键盘进行搜索，或者只是在搜索输入框中按Enter键运行。

我确信将display:none放在移动宽度的搜索按钮上可以解决问题，但显然不是。

...谢谢

Answer 1

提交表格输入点击

 $("#search").keyDown(function(e){

        if(e.which == 13) // When key pressed is "Enter" key.
            $('#search-form').submit();

    });

在响应式设计中搜索表单 - 删除移动设备上的搜索按钮

1 个答案: