web-dev-qa-db-fra.com

Afficher le bouton «Rechercher» sur le clavier Safari iPhone / iPad

J'ai remarqué en naviguant sur des sites Web comme Dell ou Google, qu'en tapant leur zone de texte de recherche avec l'iPhone, sur le clavier apparaît un bouton bleu 'Rechercher' au lieu du bouton standard 'Aller' qui apparaît sur n'importe quel formulaire normal.

Que devez-vous faire pour afficher le bouton de recherche?

iphonehtmlipadsafari
37
Javier Marín

Vous pouvez influencer ce comportement avec:

<input type="search" />

démo JS Bin

Ignorer le texte du bouton submit étant "bouilloire", je voulais juste être sûr que ce n'était pas le bouton d'envoi qui influençait le texte du clavier iOS ...

Ceci est, bien sûr, rétrocompatible puisqu'un navigateur qui ne comprend pas type="search" par défaut sera type="text", qui est utile pour créer formulaires html5 de planification prévisionnelle .

32
David Thomas

avoir type = "search" est généralement tout ce dont vous avez besoin pour faire apparaître le clavier de recherche de logiciel mais dans iOS8 il est obligatoire d'avoir un formulaire d'habillage avec action attribut.

Le code suivant aurait donc un clavier logiciel avec le bouton "Retour"

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

Mais ce code devrait avoir le bouton bleu "Rechercher" à la place

<form action=".">
    <input type="search" />
</form>
81
Anton Bielousov

Je n'ai pas pu obtenir le bouton de recherche avec

<input type="search" />

Cependant, je l'ai fait apparaître avec

<form>
    <input name="search" />
</form>
27
Tim

Sur iOS 8, vous pouvez activer le bouton bleu "Rechercher" sur le clavier en effectuant l'une des actions suivantes:

  • ajouter un nom d'entrée = rechercher
  • ajouter un type d'entrée = recherche
  • ajouter un identifiant à l'entrée avec le mot sensible à la casse "recherche" dans l'ID, par exemple the-search ou thesearchgod
4
dillqvist