Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- js:only_digits [2019/09/13 21:58]
webproducer angelegt
+++ js:only_digits [2019/09/14 17:46] (aktuell)
webproducer Erweiterung um weiteres Java-Script-Beispiel
@@ Zeile 1: / Zeile 1: @@
 ====== JavaScript: Nur Ziffern im Eingabefeld zulassen ======
-Laut HTML-Definition kann ein Eingabefeld, welches ausschließlich für die Eingabe von Zahlen vorgesehen ist mit dem Input Type "number" angegeben werden. Die Browser verhalten sich allerdings beim input type=“number“ sehr unterschiedlich. Der Google Chrome z. B. lässt trotzdem den Buchstaben „e“ und „E“ zu und es kann keine maximale Zeichenlänge (wie z. B. max. 5 Ziffern für eine Postleitzahl) angegeben werden.
+Laut HTML-Definition kann ein Eingabefeld, welches ausschließlich für die Eingabe von Zahlen vorgesehen ist mit dem Input Type "number" angegeben werden. Die Browser verhalten sich allerdings beim input type=“number“ sehr unterschiedlich. Der Google Chrome z. B. lässt trotzdem den Buchstaben „e“ und „E“ zu und es kann keine maximale Zeichenlänge (wie z. B. max. 5 Ziffern für eine Postleitzahl) festgelegt werden.
 Um einheitlich für alle Browser eine Einschränkung auf Ziffern vorzugeben kann folgendes JavaScript verwendet werden:
 <code javascript>
-<script>
+<script lang="js">
 function validateDigits( event )
 {
-    return event.charCode >= 48 && event.charCode <= 57; // nur Ziffern 0 (charCode 48) bis 9 (charCode 57)  zulassen
+    return event.charCode >= 48 && event.charCode <= 57;
 }
 </script>
 </code>
+Diese Funktion verhindert, dass Zeichen außerhalb vom charCode von 0-9 eingegeben werden, in dem als Rückgabewert FALSE zurückgegeben wird.
-<code html><input type=“text“ onkeypress=“return view.validateDigits( event )“ /></code>
+^ numerisches Zeichen ^ charCode (Zeichencode) ^
+| 0 | 48 |
+| 1 | 49 |
+| 2 | 50 |
+| 3 | 51 |
+| 4 | 52 |
+| 5 | 53 |
+| 6 | 54 |
+| 7 | 55 |
+| 8 | 56 |
+| 9 | 57 |
+Die Funktion muss jetzt bei einem Texteingabefeld bei jeder Zeicheneingabe aufgerufen werden:
+<code html>
+<html lang="de">
+    <input type="text" id="zahl" onkeypress="return validateDigits( event )" maxlength="5" />
+</html>
+</code>
+----
+//Tipp: Mit dieser Funktion können natürlich auch weitere Zeichen zugelassen oder ausgeschlossen werden. Hierfür einfach die Funktion entsprechend anpassen. Um herauszufinden, welches Zeichen welchen charCode hat kann die Funktion wie folgt angepasst werden://
+<code javascript>
+    function validateDigits( event )
+    {
+        document.getElementById( 'zahl').value = event.charCode;
+        return false;
+    }
+</code>

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge