eingabefelder wie bei apple

[lena]

hallo,

ich habe gerade bei apple.com das eingabesuchfeld in der rechten oberen ecke bewundert. anscheinend wird das aussehen mittels javascipt manipuliert denn mit reinem css klappt das wohl kaum browserübergreifend.
kann mir jemand erklären wie so etwas funktionieren kann also was genau da gemacht wird? interessiert mich einfach mal!
danke, lena

[Thes]

Hallo Lena,

musst nur mal in den Quelltext schauen ;)
Es ist ein Standard-Eingabefeld, welches links und rechts
durch Bilder erweitert wurde.

Gruesse
Thes

[Lena]

hi,
so einfach kann das aber nicht sein. denn gerade im safari lassen sich inputfelder mittels css nicht beeinflussen.

vg lena

[dicon]

Hallo lena,

so einfach kann das aber nicht sein. denn gerade im safari lassen
sich inputfelder mittels css nicht beeinflussen.

Sorry, aber leider ist es doch so einfach. Das ist reines CSS, wobei <input> nur
durch height und margin-top definiert wird. Der Rest vom look-and-feel wurde via
<div> und <span> einfach drumrum gebastelt

  
<div id="globalsearch" class="">  
 ...  
  <form id="g-search" class="search" method="get" action="http://www.apple.com/search/">  
    <div class="search-wrapper empty empty empty empty empty empty empty empty empty blurred">  
       <span class="left"/>  
       <input type="search" accesskey="s" class="g-prettysearch applesearch" id="sp-searchtext" name="q" autocomplete="off"/>  
       <span class="right"/><div class="reset"/>  
    </div>  
  </form>  
 ...  
</div>  

Grüße, dicon

[lena]

sorry aber das glaube ich nicht.
denn wenn ich in der web developper bar js deaktiviere wird mir das inputfeld so gerendert wie es der browser voreinstellt anzeigt. also wird über javascript UND css das aussehen manipuliert. ich hätte keine probleme damit diese anzeige mit reinem css für firefox und IE zu stylen aber gerade der safari hat ja einen eigenen style den man nicht manipulieren kann...deshalb bin ich ja so interessiert daran wie das geht...

vg lena

[Thes]

Hallo Lena,

sorry aber das glaube ich nicht.

Der Quelltext luegt nicht!

Es befinden sich neben dem Inputfeld (jeweils links und rechts)
zwei Bilder, die wie "runde Ecken" ausschauen:

<BILD> <INPUT-FELD> <BILD>

Was nach der Eingabe in das Textfeld geschieht, das ist eine andere
Sache und wurde hier bereits von einem Poster erwaehnt - Stichwort:
AJAX.

[lena]

die eingabe interessiert mich nicht ;( überhaupt gar nicht.
wie könnt ihr mir denn erklären wie das ganze in safari funktioniert?
vg lena

[Thes]

Hallo Lena,

wie könnt ihr mir denn erklären wie das ganze in safari funktioniert?

So langsam bekomme ich das Gefuehl, dass du es nicht verstehen
moechtest ;( Wir haben dir nun weit und breit den Aufbau erklaert.
Zudem existiert auch noch der selbsterklaerende Quellcode.

Lies nochmal die Antworten auf dein Posting durch, schaue dir
nochmal den Code genauer an und schlussfolgere Anhand deiner
Erkenntnisse.

Das sollte eignentlich recht leicht zu verstehen sein.
Denn es ist lediglich ein bisschen HTML und CSS.

Thes

[Lena]

nein ist es nicht... ich habe leider das gefühl dass du nicht weisst dass man inputfelder beim safari nicht stylen kann. deshalb ist es nicht nur reines css und html..sorry ;)
aber nix für ungut denn tim hat schon umfassend und perfekt beantwortet.

vg lena

[Thes]

Na hauptsache dir konnte geholfen werden ;)

[lena]

Na hauptsache dir konnte geholfen werden ;)#

genau ;) und jetzt ärgern wir uns nicht sondern geniessen den schönen tag. meine güte es besteht doch nicht immer grund gleich so agressiv zu werden. vg lena.

[dicon]

Hallo Lena,

dem Posting von Tim ist absolut nichts mehr hinzuzufügen. Was Tim sehr ausführlich
gepostet hat, ist aber letztlich auch nichts anderes, als das, was die anderen
versucht haben zu erklären. Zur Erinnerung:

anscheinend wird das aussehen mittels javascipt manipuliert
denn mit reinem css klappt das wohl kaum browserübergreifend.

a) apple.com hat die Optik, die für Safari von Haus aus geliefert
   wird via CSS auf andere Browser portiert, nicht umgedreht.

b) JA, dass _Aussehen_ wird per JS manipuliert, aber

c) nicht wegen der Optik, sondern um die gleiche Funktionalität
   zu liefern, wie Safari, weil

d) hinter jedem Element, das für dich scheinbar nur optische
   Bedeutung hat, auch jede Menge JS-Funktionen stehen und damit

e) das _Aussehen_ jederzeit auch ohne JS, ausschließlich mit reinem
   CSS und HTML hätte erreicht werden können.

ich habe leider das gefühl dass du nicht weisst dass man inputfelder
beim safari nicht stylen kann.

Wenn dir das selbst vorher so deutlich klar war, versteh ich deine Eingangsfrage
erst recht nicht. Dann hätte dir doch bewusst sein müssen, dass das, was du
im Safari siehst, die Standardoptik ist. Oder?!

eoc, dicon

PS: Frage an Tim: hast du evnt eine Referenz zu den browserspezifische
Attributen von Safari zur Hand?

[dicon]

Ich glaube, wir reden grad etwas aneinander vorbei.

Lena meint das reine look-and-feel.

denn wenn ich in der web developper bar js deaktiviere
wird mir das inputfeld so gerendert wie es der browser
voreinstellt anzeigt.

Das ist normal und hat auch nicht zwingend was mit AJAX zu tun. Es findet
einfach nur eine Überprüfung der Browsereinstellungen statt. Für JS = on sorgt
wahrscheinlich die search_decorator.js für die kleine Lupen, die runden
Ecken und das etwas schmalere Input-Feld - da wird einfach nur der class-Wert
geändert. Für JS = off fehlt dann halt alles - s. <noscript> im Quellcode.

Ansonsten versteh ich die Frage trotzdem nicht, denn das Input-Feld selbst
hat keine CSS-Attribute, die durch Safari nicht unterstützt werden. Was dürfte
denn deiner Meinung nach in Safari nicht funktionieren?

Grüße, dicon

[David Tibbe]

Hallo lena,

kann mir jemand erklären wie so etwas funktionieren kann also was genau da gemacht wird?

Dort wird im Hintergrund mittels AJAX eine Anfrage zu der aktuellen Eingabe an den Server gesndet, der sucht entsprechende Ergebnisse raus, sendet sie zurück. Auf der Seite werden sie dann in dem Layer eingeblendet.
Googel mal ein wenig nach "autocompleter ajax javascript" usw., da wirst du sicher was finden.

Grüße
  David

[Tim Tepaße]

Hallo,

ich habe gerade bei apple.com das eingabesuchfeld in der rechten oberen ecke bewundert. anscheinend wird das aussehen mittels javascipt manipuliert denn mit reinem css klappt das wohl kaum browserübergreifend.

Kommt drauf an, was Du genau meinst. Wenn Du die direkte Ergebnisanzeige meinst, die wird mit Ajax, d.h. viel Javascript erstellt; dazu haben andere ja schon was im Thread gesagt. Neulich hab ich mal das Grobkonzept für das gleiche Prinzip bei Wikipedia skizziert. Für Darstellung der Such-Resultate ist also JS & CSS verantwortlich.

Wenn es Dir zusätzlich um die runden Ecken und die Lupe innerhalb des Eingabefeldes geht: <input type="search"> ist eine proprietäre Erweiterung von Apple; eigentlich fürs Dashboard vorgesehen, das ja auch Webtechniken nutzt. Allerdings ist es auch in Safari verfügbar und hat so auch seinen Weg ins Netz gefunden. Es fällt nicht besonders auf, in Browsern, die den Typ „search“ nicht kennen wird es einfach als <input type="text"> gerendert.

Das Apple-Suchfeld hat ein paar zusätzliche Attribute, die an einem Suchfeld durchaus Sinn haben wie z.b. autosave zum Speichern vorheriger Suchen. Allerdings macht Apple beim Live-Search-Konzept da keinen Gebraucht von, da die Suche dort ja im Prinzip live ist. Es war übrigens auch mal für HTML 5 (Web Forms 2.0) im Gespräch, aber Formulare wurden bei den HTML 5 Anstrengungen erstmal weiter in die Zukunft geschoben, wenn ich das richtig sehe.

Tim

[lena]

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.

vg lena

[Tim Tepaße]

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:  
  
![](http://tepasse.org/tmp/safari-apple-input)  
  
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

[lena]

danke tim ;) du hast mein problem erkannt und perfekt beantwortet!! vielen dank!!