Safari Technology Preview – Apple released eine Developer Version von Safari

Apple hat heute eine Developer Version von seinem Browser Safari herausgebracht. Der Download ist allen interessierten Nutzer möglich, es wird keine Mitgliedschaft im Developer Program oder ähnlichem vorrausgesetzt. Zukünftig sollen Safari Updates deutlich schneller und vor allem früher ausgeliefert werden, so wie es bei Mozillas Firefox und Google Chrome schon länger der Fall ist.

Die Safari Tech Preview lässt sich als Standalone App installieren und läuft so komplett unabhängig von Safari, es können also beide Browser problemlos nebeneinander installiert werden.

Der Download ist unter https://developer.apple.com/safari/technology-preview/ zu finden.


HTML5 Nummerinput als Dezimalinput nutzen

Die „neuen“ HTML5 Input Elemente sind ja eine super Sache, wenn sie denn funktionieren würden…

Ich war heute den besseren Teil des Tages damit beschäftigt, mich mit ihnen rum zu ärgern. Genauer mit dem input type=“number“. Stellen wir uns einmal vor ich hätte eine Website auf Basis von jQuery Mobile, würde also ganz klar auf mobile Endgeräte abzielen. Den ganzen IE6,7,8,9 Dreck können wir also getrost links liegen lassen. Ja ich weiß, es gibt die Windows8 Telefone und da läuft auch der IE9 / IE10 drauf, das ist im Moment aber erstmal egal.

Jetzt geht es in der Hauptsache um Android. Ich möchte ein input Feld erstellen, dass dem User die Zahlentastatur zeigt und Dezimalwerte akzeptiert. Im default ist der type“number“ auf Schritte mit ganzen Zahlen eigestellt. Das lässt sich ja einfach ändern mit dem „step“ Attribut. Ein step=“0.1″ oder step=“0.01″ validiert auch Dezimalzahlen mit Einer bzw. Zwei Nachkommastellen.

Input type=“number“ im Chrome auf Android

Wendet man dies nun an und schaut sich das ganze auf einem Android Tablet mit aktuellen Chrome an, in meinem Fall ein Nexus 10 mit Chrome Version 28.0.1500.94, dann funktioniert das wie gewünscht.

Mit deutscher culture auf dem Tablet wird im Feld das Komma akzeptiert, genauso wie ein Punkt. Holt man sich mit $(this).val() den Inhalt des Feldes, wird in beiden Fällen ein Dezimalwert mit Punkt zurückgegeben.
Mit einer US culture wird das Komma nicht akzeptiert, hier ist nur die Schreibweise mit dem Punkt valide. Macht ja aber auch Sinn, das Komma gilt hier ja als tausender Trenner.
Das ist so ziemlich das Verhalten, das ich erwartet habe. caniuse bestätigt ja auch, die Unterstützung von input type=“number“ in dem Browser.

Input type=“number“ im Firefox auf Android

Anders hingegen sieht das mit dem aktuellen Firefox (v.22.0) auf dem gleichen Tablet aus. Laut caniuse gibt es hier überhaupt keine Unterstützung. Mozilla ist ja immer etwas strenger mit ihren „shipping criteria“, sodass solche Features manchmal erst später kommen. Ich würde also erwarten, dass der User keine Zahlentastatur bekommt und dieses Feld wie ein type=“text“ behandelt wird…
Das ist natürlich nicht der Fall, es bleibt ein type“number“. Bei der Eingabe eines Dezimalwertes wird das Feld nicht valide und der Inhalt wird gelöscht. Auch val(), bekommt kein Ergebnis.
Wirklich bizarr (zumindest für mein Verständnis) ist allerdings, dass Firefox per feature detection von z.B.: modernizr zurückliefert, dass es type=“number“ unterstützt.

Integers scheinen auch akzeptiert zu werden. Dies lässt drauf schließen, dass Firefox, das „step“ Attribut nicht auswertet, doch auch diese Info wird nicht an modernizr geliefert…

Unter IOS und Safari funktioniert es übrigens einigermaßen problemfrei. Auf einem Windows Phone habe ichs mir noch nicht angetan, genauso wenig auf dem build-in Android Browser.

Vielleicht (hoffentlich) übersehe ich etwas. Zur Zeit löse ich es mit einem input type=“text“ und ein bisschen Javascript Spielerei. Ich finde es aber nach wie vor unschön, denn der User muss immer zur Zahlentastatur wechseln. Eigentlich hätte ich auch erwartet, dass sich jQuery Mobile in irgendeiner Art und Weise drum kümmert.

Sollte jemand Erfahrungen oder vielleicht sogar eine Lösung haben würde ich mich über einen Kommentar ziemlich freuen!