Nov
Suchfeld im Mac OS X Stil
Das Safari mit <input type="search" /> seit Version 1.3 ein eigenes Suchfeld im Mac OS X Stil unterstützt dürfte mittlerweile ja allgemein bekannt sein. Das des Weiteren davon abzuraten ist proprietäre HTML-Tags zu verwenden ist ebenfalls klar.
Diesmal gehen jedoch die Meinungen der Entwicklern stark auseinander, bietet das Suchfeld doch zumindest Safari Benutzern einen vertrauten Anblick. Über das linke Symbol lässt sich einfach und schnell auf die letzten Suchbegriffe zurückgreifen, klickt man in das Feld verschwindet der Platzhalter-Text und es erscheint rechts ein weiteres Symbol über das sich alle Eingaben bequem wieder löschen lassen.
Wer das Suchfeld nun tatsächlich in seine Webseite einbaut wird feststellen, dass diese danach nicht mehr als gültiges (X)HTML validiert. Und was sieht eigentlich der Benutzern eines anderen Browsers?
Zum Glück kann man sich die Tatsache zu nutze machen, dass das Suchfeld in den meisten anderen Browsern einfach als <input type="text" /> interpretiert wird. So kann man mit einem kleinen JavaScript nicht nur alle Safari Benutzer glücklich machen, sondern auch noch ein vergleichbares Suchfeld als Alternative anbieten. Das Beste ist jedoch, dass die Seite dann auch den W3C Validator wieder fehlerfrei durchläuft.
Das der Tag natürlich nach wie vor proprietär ist muss jeder selbst mit seinem Gewissen vereinbaren.
Hier ein Beispiel für eine mögliche Lösung mit JavaScript:
<input type="text" name="s" accesskey="f" maxlength="55" />
<script type="text/javascript">
//<![CDATA[
var autosave = "Suchergebnisse";
var placeholder = "Finden…";
var results = 5;
var search = document.getElementsByName("s")[0];
function setSafariSearch(element) {
element.setAttribute("type", "search");
element.setAttribute("autosave", autosave);
element.setAttribute("placeholder", placeholder);
element.setAttribute("results", results);
}
function setNormalSearch(element) {
element.value = placeholder;
element.onfocus = function() {
if (element.value == placeholder) element.value = "";
}
element.onblur = function() {
if (!element.value) element.value = placeholder;
}
}
if (navigator.vendor.indexOf("Apple Computer") != -1) {
setSafariSearch(search);
} else {
setNormalSearch(search);
}
//]]>
</script>
Kommentare
Zu diesem Beitrag wurden noch keine Kommentare verfasst.