nicht angemeldet
Hallo,
also ich meine wirklich nur das aussehen dieses suchfeldes. das mit input type search klingt interessant ein kurzer test hat aber gezeigt dass damit bei mir keine runden ecken erzeugt werden...kann ich mir auch nicht vorstellen ehrlich gesagt dass das so funktioniert.
Doch genau so funktioniert das mit einem kurzen Text in meinem Safari (3b und früher auch in 2 und 1.3). Womit hast Du getestet? ;)
Die Komplett-Lösung auf apple.com ist natürlich komplizierter, weil man auch noch andere Browser bedienen will. Das entsprechende HTML von Apple.com:
~~~html
<label for="sp-searchtext">
<span class="prettyplaceholder">Search</span>
<input type="search" name="q" id="sp-searchtext" class="g-prettysearch applesearch" accesskey="s">
</label>[code]
Da ist schon type="search" zu sehen. D.h. Safari kriegt schonmal die Safari-Darstellung von Apple Suchfeldern. Nun kommt Javascript ins Rollen.
In [link:http://images.apple.com/global/scripts/apple_core.js@title=apple_core.js] wird die Methode [code lang=javascript]AC.decorateSearchInput()
1\. Sie bekommt Optionen übergeben, die genau auf dieses Apfel Suchfeld wirken. placeholder, results und autosave sind genau die vorhin von mir erwähnten proprietären Attribute.
2\. Für Safari (`if(AC.Detector.isWebKit())`{:.language-javascript}) setzt sie diese Attribute dynamisch.
3\. Wenn es nicht Safari ist – obiges if-Statement hat einen langen else-Zweig – dann wird dieses input-Element neu erzeugt und mit diversen div- und span-Elementen ausgestattet. Diese Div- und Span-Elemente dienen zum Nachahmen des Feldes, sowohl graphisch mit CSS, als auch funktionell, mit dem Reset-Knopf rechts und mit dem grauen Platzhalter. All das geschieht in diesem langen else-Zweig.
Diese Methode wird in [search_decorator.js](http://images.apple.com/global/scripts/search_decorator.js) genutzt. Dort werden nach dem Laden des DOMs der Seite alle input-Elemente der Seite durchgegangen und für die mit der Klasse „prettysearch“ werden die Apfel-proprietären Optionen autosave gesetzt bzw. placeholder aus dem Dokument extrahiert und als Parameter von AC.decorateSearchInput() aufgerufen.
Sprich: Ist der Browser Safari, kriegen die entsprechenden input-Felder die Apple-proprietären Attribute für <input type="search">. Ist der Browser nicht Safari, wird die <input type="search">-Funktionalität durch durch JS hinzugefügte diverse spans und divs links und rechts des normalen input-Feldes simuliert.
Die entsprechenden CSS-Regeln findet man in [base.css](http://images.apple.com/global/styles/base.css) unter „PRETTY SEARCH“. Ganz viele Regeln mit .search-wrapper. Sogar den HTC-Hack, um dem Internet Explorer richtige PNG-Darstellung beizubringen findet man dort.
Werf in Firefox mal einen Blick in dem DOM-Inspektor, dort siehst Du diese plötzlich hinzugekommenen spans gut. Inspizierst Du dagegen den Live-DOM-Baum in Safari 3 mit dem Web Inspector, gibt es diese dort unnötigen Spans nicht:
Denn in Safari kommt das Rendering für das Suchfeld aus dem Browser, wie z.B. [hier](http://tepasse.org/tmp/apple-input-search).
Tim