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

Question

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

在桌面/平板电脑宽度上，右侧有一个搜索输入字段和一个样式化的“搜索”按钮。您可以输入搜索词，然后单击“搜索”按钮或直接在键盘上按 Enter 键，结果相同。

当您缩小到移动设备宽度时，搜索输入字段会填满屏幕的宽度。提交按钮位于其下方。在桌面上，单击按钮或按 Enter 激活搜索。

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

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

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

很明显，通过隐藏提交/搜索按钮，手机不再为我提供运行搜索的本机选项。此外，在移动宽度的桌面上，即使在搜索输入框中按回车也无法启动搜索。

这是我的搜索框：

<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;*/
  }
}

所以.....当我在移动屏幕上时如何隐藏这个提交按钮，但仍然让搜索从移动键盘运行，或者在搜索输入框中按回车键运行。

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

谢谢...

Answer 1

提交表单输入点击

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

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

    });