Eigentlich wollte ich diesen Blog Post irgendwie ala “die wundersamen Abenteuer des Robinson Crusoe” nennen. Aber Google und SEO verbietet das. Worum geht es? Wieder einmal um was banales in HTML5. Benutzer sollen nur Integer Zahlen eingeben können.
Nun hat dieser JavaScript Stack an und für sich schon Probleme mit der Tatsache, das die IT Welt nicht einfach nur Number ist. HTML5 erbt diese “Errungenschaft”.
Mit dem Input Type Number lassen sich Benutzereingaben auf Zahlen einschränken. Anhand von Ergänzenden Attributen wie Min und Max lässt sich der Bereich ins positive begrenzen. Zusätzlich dient das Attribut Step dazu auf Ganzzahlen zu beschränken. Step=1 sollte also nur Integer Werte abbilden, was übrigens auch der Default Wert ist.
Soweit der Standard, der wenig überraschend je Browser unterschiedlich implementiert ist.
Zum Test dient folgender ASP.NET Webforms und VB.NET Code.
1: <Script runat="server">
2: Protected Sub ButtonClick(sender As Object, e As EventArgs)
3: Label1.Text = TextBox1.Text
4: End Sub
5: </Script>
6: <body>
7: <form id="form1" runat="server">
8: <div>
9: <asp:TextBox ID="TextBox1" runat="server"
10: min="0"
11: step="1"
12: TextMode="Number"></asp:TextBox>
13: <asp:Button ID="Button1" runat="server" Text="Button" OnClick="buttonclick"/>
14: <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
15: </div>
16: </form>
Der Chrome Browser versucht mit einem Doppelplfeil einen sanften Hinweis auf die erwarteten Eingaben zu geben.
Wenn das Formular ohne novalidate definiert ist, wird der Browser eine Fehlermeldung ausgeben. Falls andere Validierungsframeworks wie aus JQuery eingesetzt werden, wird novalidate im FORM Element gesetzt. Allerdings kann der Benutzer dann Komma und Tausender Trennzeichen Punkt eingeben.
Den absoluten Burner (O-Ton Carmen Geiss) liefert der Internet Explorer 11.
Ist schon seltsam genug, aber nun treiben wir das auf die Spitze. Im Codebehind wird der Rückgabewert per CInt in einen Integer umgewandelt.
IE 11 rundet erwartungsgemäß auf
Chrome ändert die Dimension, was einigermaßen überraschende Konsequenzen haben kann
Chrome macht aus dem Komma beim Post einen Tausender Trennpunkt.
Im Ergebnis ist der Input Type Number kaum zu gebrauchen. Vermutlich sinnvoller ist der Regular Expression unterstützende Typ Text in Verbindung mit Pattern (\d*).
HTML5 ist eben ein fluent Standard.