<input type = „suchen“> nicht mehr zeigt Abbruchtaste (x) unter iOS

Question

<input type="search"> 

All Online-Artikel zeigt, dass und input mit type=search eine Löschtaste auf der rechten Seite des Eingangs hat (auf Apple-Produkten) .

Dies funktioniert immer noch in Safari auf MacOS, aber in mobilen Safari (iOS9) funktioniert das nicht mehr.

Gibt es eine Möglichkeit, diesen Such-Abbrechen-Knopf zurück zu bekommen?

ich dies bereits versucht:

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

Ich habe auch versucht eine name und value den Eingang geben. Auch es in eine form setzen, aber ohne Erfolg.

Ich fand eine page that added the button using css, aber auf meinem iPhone, drücken Sie die Taste wird die Carret innerhalb der Taste platzieren, die ist super komisch und unbrauchbar.

Answer 1

Also lassen Sie mich damit beginnen, wie ich dahin kam, wo ich bin. Zuerst habe ich eine Eingabe als type="search" in OS X und iOS 9 geladen. Ich sah, wie Sie es getan, dass es auf OS X, aber nicht iOS arbeitete. Also habe ich angefangen zu untersuchen. Wenn ich unter Eingabehilfen ohne Text in der Eingabe nachgesehen habe, hatte es nur ein einziges untergeordnetes Element. Als ich Text eintippte, hatte ich plötzlich zwei.

in der unteren Ecke unter Zugänglichkeit See. Wenn ich den Mauszeiger über halte, wird das kleine, klare X hervorgehoben, wie oben zu sehen ist. Also habe ich dasselbe in iOS getestet und es funktioniert tatsächlich nur dann, wenn man den Mauszeiger über das selbe Element bewegt und nichts hervorhebt. So wird es von Safari in iOS hinzugefügt.

Als nächstes begann ich mit etwas CSS zu spielen. Mein erster Gedanke war, wenn es nicht zeigt, vielleicht ist es nur ein Display-Problem und so habe ich das hinzugefügt.

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

Welche hat mich jetzt diese in iOS:

es also ist es aber aus irgendeinem Grund auf iOS seine versteckten und keine Inhalte zu bekommen. Wenn Sie darauf klicken, wird das Suchfeld nicht gelöscht, sobald Sie es erzwingen, sichtbar zu sein. Ich mache immer noch damit herum, aber im Moment scheint es, als hätten sie es kaputt gemacht. Absichtlich oder nicht bin ich mir nicht sicher. Gegenwärtig kann eine CSS- und JavaScript-Lösung Sie dahin bringen, wo Sie schneller sein möchten. Ich werde die Antwort aktualisieren, wenn ich etwas anderes finde.

EDIT

Diese mich treibt Nüsse. Ich habe die gesamte Entwicklerdokumentation für Safari und iOS durchsucht.

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

Sie verweisen sie immer noch wie in obigem Link unterstützt werden, aber diese Dokumente sind seit 2012 nicht, wenn Sie bei der Revision der Geschichte aussehen aktualisiert und ich keine neueren nicht finden kann. Blarg. Ich habe jede Kombination ausprobiert, die ich kann, aber es funktioniert einfach nicht. Ich denke, es ist sicher anzunehmen, da es nicht so schwer sein sollte, es zum Laufen zu bringen, dass sie es kaputt gemacht oder entfernt haben und es nicht wichtig genug zu erwähnen ist. Ihre Dokumentation sagt so etwas wie dieses CSS zu verwenden:

input { 
    -webkit-appearance: searchfield; 
} 

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

An diesem Punkt, wie ich sagte Ihre eigene Rolle oder vielleicht sogar einen Fehlerbericht und vielleicht können wir sicher herausfinden.

Answer 2

Ich glaube nicht, dass es möglich ist mit nur in iOS 9, müssen Sie einige "Hacking" tun.

Hier ist Live JSFIDDLE Beispiel.

Answer 3

Scrap es alltogether und verwenden Sie eine benutzerdefinierte css/js-Lösung oder bereits funktionierende Plugins wie devextreme, denn sonst haben Sie immer Probleme mit nicht unterstützten Browsern oder Frameworks, die ihre eigenen Styling (z. B. Bootstrap).