2011-02-01 24 views
28

DellやGoogleなどのウェブサイトでナビゲートしていることがわかりました。キーボードの検索テキストボックスに入力すると、標準ではなく「検索」ボタンが青色で表示されます任意の標準形式で表示される「Go」ボタン。iPhone/iPadのSafariキーボードで「検索」ボタンを表示

検索ボタンを表示するにはどうすればよいですか?

答えて

28

あなたはこの動作に影響を与えることができます...

type="search"を理解していないブラウザはデフォルトでtype="text"となりますが、これはusefuですl forward-planning html5 formsを作成します。

+0

それは、このサイト上で動作する理由任意のアイデアを持っている必要がありますでも? http://www.mobilecityonline.com/ iPhoneでソースを確認し、タイプ=検索の入力を使用していません。 – einarq

+5

自分のコメントに答えるために、テキストボックスの名前に「検索」という単語も含まれていれば、iPhoneでキーボードに「検索」と表示されるようです。 HaventはAndroidをテストしました。 – einarq

+0

要素の 'id'にはChromeで動作させるための検索が含まれていなければなりませんでした。そして、iPhoneとiPad上で動作させるために、''の中に' input'を置かなければなりませんでした。 – sshow

0

キーボードはオペレーティングシステム(iOS)によって処理され、直接変更することはできません。必要な入力のタイプによって、表示するキーボードのタイプが決まります。

ウェブサイトがHTML5の場合は、@ Davidの回答が有効です。私はちょうどそれがありませんでしたテキストに影響を与えるボタンを提出することを確認したかった「やかん」はsubmitボタンのテキストを無視し

<input type="search" /> 

JS Bin demo

27

私は

<input type="search" /> 

て検索ボタンを取得することができませんでしたしかし、私はあなたが「検索」青を有効にすることができ、それはiOSの8日

<form> 
    <input name="search" /> 
</form> 
+2

名前= "検索"だけでなく、単語 "検索"を含むだけで十分です。たとえば、name = "archive_search" –

+4

入力フィールドがフォーム要素で囲まれるまで、検索キーボードを表示できませんでした。先端に感謝します。 – dirkoneill

+3

iOS 9.3.1には、検索ボタンを表示するための 'action'属性が必要なようです。 – evolutionxbox

4

で表示されるように手に入れた - ボタン私は、検索

  • =入力された名前を追加し、追加を

    • :のいずれかを実行して、キーボード上のNPUTタイプ=検索は
    • 検索やthesearchgodが
  • +0

    は私のためには機能しませんでした - フォームアクションで上記の@Anton Bielousovソリューションを使用しなければなりませんでした。 – avs099

    60

    タイプは=を「検索」を有する 例えば、IDで大文字と小文字を区別単語「検索」と入力するIDを追加するには、通常、あなたが必要とするすべてでありますソフトウェアの検索キーボードを表示させるには、iOS8では、アクション属性のラッピングフォームが必須です。

    したがって、次のコードは、

    <form> 
        <input type="search" /> 
    </form> 
    

    「戻る」ボタンでソフトウェアキーボードを持っているでしょう。しかし、このコードは、青色の「検索」ボタンの代わりに

    <form action="."> 
        <input type="search" /> 
    </form> 
    
    +2

    これは私のために働いた答えです。 – kpeatt

    +2

    'type = search'を設定すると、丸め検索入力フィールドのコーナーのChrome iOSに負のUX副作用があります。ブラウザが私にとってUIデザインの意思決定を開始するときに嫌悪感を覚えている。 – demisx

    +0

    @ demisx CSSのデフォルトのブラウザスタイルをリセットすることができます(おそらく、常にそうするべきです): '[type =" text "]、 [type =" search "] { -webkit-appearance:none; } ' とスタイリングと機能を混在させないでください。 –

    関連する問題