web-dev-qa-db-fra.com

<input type = "search"> n'affiche plus le bouton d'annulation (x) sous iOS

<input type="search">

Tous les articles en ligne indiquent que et input avec type=search aura un bouton clair sur le côté droit de l'entrée (sur les produits Apple). 

Cela fonctionne toujours dans Safari sur MacOS, mais dans le safari mobile (iOS9), cela ne fonctionne plus.

Existe-t-il un moyen de récupérer ce bouton d'annulation de recherche?

J'ai déjà essayé ceci:

input::-webkit-search-cancel-button{-webkit-appearance:searchfield-cancel-button;}

J'ai également essayé de donner à l'entrée une name et value. En outre, le mettre dans une form, mais en vain.

J'ai trouvé une page qui a ajouté le bouton en utilisant css , mais sur mon iPhone, appuyer sur le bouton placera le carret à l'intérieur du bouton, ce qui est super bizarre et inutilisable.

htmlioscssformsinput
15
Gerben

Alors laissez-moi commencer par comment je suis arrivé là où je suis. J'ai d'abord chargé une entrée sous type="search" sous OS X et iOS 9. J'ai constaté que cela fonctionnait sous OS X, mais pas sous iOS. Alors j'ai commencé à enquêter. Lorsque je cherchais une accessibilité sans texte dans l'entrée, elle ne comportait qu'un seul élément enfant. Lorsque j'ai tapé un texte, il en a soudainement pris deux.

Voir dans le coin inférieur sous l'accessibilité. Lorsque je survole div:role(button), il met en évidence le petit X clair comme vous pouvez le voir ci-dessus. Alors, j’ai testé la même chose sur iOS et il ne fait effectivement la même chose que lorsque vous survolez le même élément, cela ne met en évidence rien. Donc, il est ajouté par Safari dans iOS.

Ensuite, j'ai commencé à jouer avec du CSS. Ma première pensée a été que si cela ne montrait peut-être pas que c'était juste un problème d'affichage, alors j'ai ajouté ceci.

::-webkit-search-cancel-button {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: blue;
}

Ce qui m'a maintenant eu ceci dans iOS:

Donc, il est là, mais pour une raison quelconque sur iOS, il est caché et ne reçoit aucun contenu. De plus, cliquer dessus ne supprime pas le champ de recherche une fois que vous le forcez à être visible. Je continue de jouer avec ça, mais pour l'instant, on dirait qu'ils l'ont cassé. Intentionnellement ou non, je suis incertain. Pour le moment, une solution CSS et JavaScript peut vous ramener là où vous voulez être plus rapide. Je mettrai à jour la réponse si je trouve autre chose.

MODIFIER

Ça me rend dingue. J'ai consulté toute la documentation de leurs développeurs pour Safari et iOS. 

https://developer.Apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//Apple_ref/doc/uid/(null)-SW1

Ils le mentionnent toujours comme étant pris en charge dans le lien ci-dessus, mais ces documents n'ont pas été mis à jour depuis 2012 si vous consultez l'historique des révisions et que je ne trouve pas de nouveaux. Blarg. J'ai essayé toutes les combinaisons possibles, mais cela ne fonctionne tout simplement pas. Je pense qu'il est prudent d'assumer, puisqu'il ne devrait pas être si difficile de le faire fonctionner, qu'ils l'ont cassé ou enlevé et ne pensent pas que c'était assez important pour être mentionné. Leur documentation dit d'utiliser quelque chose comme ceci CSS:

input {
    -webkit-appearance: searchfield;
}

*::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

À ce stade, comme je l’ai dit, lancez le vôtre ou peut-être même un rapport de bogue et peut-être que nous pourrons le savoir.

13
AtheistP3ace

Je ne pense pas que ce soit possible avec uniquement <input type="search"> dans iOS 9, vous devrez faire du "piratage".

Voici live JSFIDDLE example.

1
Tuc3k