it-swarm.com.de

<input type = "search"> zeigt nicht mehr die Abbrechen-Schaltfläche (x) unter iOS an

<input type="search">

Alle Online-Artikel zeigen an, dass und input mit type=search auf der rechten Seite der Eingabe (bei Apple-Produkten) eine Schaltfläche zum Löschen angezeigt wird. 

Dies funktioniert immer noch in Safari unter MacOS, aber in Mobile Safari (iOS9) funktioniert dies nicht mehr.

Gibt es eine Möglichkeit, diese Such-Abbruch-Schaltfläche zurückzubekommen?

Ich habe das schon probiert:

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

Ich habe auch versucht, der Eingabe eine name und eine value zu geben. Es wird auch in eine form eingefügt, jedoch ohne Erfolg.

Ich habe eine Seite gefunden, die den Button mit css hinzugefügt hat, aber auf meinem iPhone wird durch Drücken des Buttons der Wagen in den Button eingefügt, was sehr komisch und unbrauchbar ist.

15
Gerben

Lassen Sie mich damit beginnen, wie ich dahin gekommen bin, wo ich bin. Zuerst habe ich eine Eingabe als type="search" in OS X und iOS 9 geladen. Ich habe gesehen, wie Sie es getan haben, dass es unter OS X, aber nicht unter iOS funktioniert. Also fing ich an zu recherchieren. Wenn ich unter Eingabehilfen ohne Text in der Eingabe nachgesehen habe, hatte ich nur ein untergeordnetes Element. Als ich Text eintippte, hatte er plötzlich zwei.

Siehe in der unteren Ecke unter Barrierefreiheit. Wenn ich über div:role(button) schwebe, wird das kleine klare X hervorgehoben, wie Sie oben sehen können. Also habe ich das Gleiche in iOS getestet und es tut tatsächlich dasselbe, nur wenn Sie über dasselbe Element fahren, wird nichts hervorgehoben. Es wird also von Safari in iOS hinzugefügt.

Als Nächstes begann ich mit CSS zu spielen. Mein erster Gedanke war, wenn es nicht angezeigt wird, vielleicht ist es nur ein Anzeigeproblem, und ich habe dies hinzugefügt.

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

Was mir jetzt das in iOS gebracht hat:

So ist es dort aber aus irgendeinem Grund auf iOS versteckt und bekommt keinen Inhalt. Wenn Sie darauf klicken, wird das Suchfeld auch nicht gelöscht, wenn Sie es erzwingen, dass es sichtbar ist. Ich mache immer noch Spaß damit, aber momentan scheint es, als hätten sie es gebrochen. Absichtlich oder nicht bin ich unsicher. Eine CSS- und JavaScript-Lösung kann Sie vorübergehend wieder dahin bringen, wo Sie schneller sein möchten. Ich werde die Antwort aktualisieren, wenn ich etwas anderes finde.

EDIT

Das macht mich verrückt. Ich habe die gesamte Entwicklerdokumentation nach 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 immer noch darauf, dass sie im obigen Link unterstützt werden, aber diese Dokumente wurden seit 2012 nicht aktualisiert, wenn Sie sich den Revisionsverlauf ansehen und ich kann keine neueren finden. 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 funktionieren zu lassen, dass sie es kaputt gemacht oder entfernt haben und nicht das Gefühl haben, dass es wichtig genug ist, um es zu erwähnen. In ihrer Dokumentation heißt es, so etwas wie CSS zu verwenden:

input {
    -webkit-appearance: searchfield;
}

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

An diesem Punkt, wie ich schon sagte, würfeln Sie selbst oder reichen Sie sogar einen Fehlerbericht ein.

13
AtheistP3ace

Ich konnte es mit dem folgenden CSS auf dem iPhone zum Laufen bringen

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}
<input type="search" value="Example">
5
mayur patki

Ich glaube nicht, dass es nur mit <input type="search"> in iOS 9 möglich ist.

Hier ist live JSFIDDLE Beispiel.

1
Tuc3k