0

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

在桌面/平板电脑宽度上，右侧有一个搜索输入字段和一个样式化的“搜索”按钮。您可以输入搜索词，然后单击“搜索”按钮或在键盘上按 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在移动宽度上放置搜索按钮可以解决问题，但显然不是。

谢谢...

4

1 回答 1

0

提交表单 Enter 点击

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

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

    });
于 2013-11-13T09:50:51.870 回答