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

Question

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

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

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

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

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

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

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

这是我的搜索框:

<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();

    });