0

レスポンシブ Web サイトのヘッダーにある検索ボックスを使用しています。

デスクトップ/タブレットの幅では、右側に検索入力フィールドとスタイル設定された「検索」ボタンがあります。検索語を入力して [検索] ボタンをクリックするか、キーボードの Enter キーを押すだけで同じ結果が得られます。

モバイルの幅に縮小すると、検索入力フィールドが画面の幅いっぱいになります。送信ボタンはその下にあります。デスクトップでは、ボタンをクリックするか、Enter キーを押して検索を有効にします。

実際の iphone フォンでは、「検索」ボタンを押すことができますが、画面の下部から立ち上がるネイティブのモバイル キーボードには、通常 Enter/Return キーがある場所に検索ボタンがあります。私がフォームにいることを知っているようで、キーボードは基本的に ENTER キーの場所を押すことで検索を開始するオプションを自動的に提供します....しかし、SEARCH と表示されます。

ここまでは順調ですね。すでにキーボードにあるため、モバイルのヘッダーにボタンは必要ないと思います。したがって、モバイル幅のボタンを非表示にすると、すべてがよりタイトになり、見栄えが良くなります. そこで、これを CSS に追加して、モバイルで非表示にしました。 #search-button {display: none;}

しかし、現在、検索はまったく機能しません。モバイルでは、以前に表示されたキーボードのオプションが表示されず、Enter キーを押しただけではまったく機能しません。モバイル幅のデスクトップでは、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;*/
  }
}

では、モバイル画面を使用しているときにこの送信ボタンを非表示にするにはどうすればよいですか。ただし、モバイル キーボードから検索を実行するか、検索入力ボックスで Enter キーを押すだけで検索を実行できます。

検索ボタンをモバイル幅に配置すればうまくいくと確信していdisplay:noneましたが、どうやらそうではないようです。

ありがとう...

4

1 に答える 1

0

フォームの送信 クリックして入力

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

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

    });
于 2013-11-13T09:50:51.870 に答える