Eingabefeld nur mit Zahlen füllen

Manchmal kann es hilfreich sein, wenn man in ein bestimmtes Eingabefeld eines Formulars nur mit Zahlen füllen kann. Das kann bspw. in Feldern für Telefonnummern der Fall sein. Mit einem einfachen JavaScript ist es dabei möglich, das Geld nur mit Zahlen zu füllen. Buchstaben und andere Zeichen entfernt das JavaScript hingegen wieder.

Allerdings gibt es auch eine Variante mit HTML 5. Diese kommt ohne zusätzliches Script aus und funktioniert in jedem halbwegs modernen Browser. In diesem Artikel zeige ich dir beide Varianten und wie sie funktionieren.

Ein Eingabefeld nur mit Zahlen füllen – Variante mit JavaScript

Mit dem nachstehenden JavaScript kannst du erreichen, dass der Nutzer in einem Eingabefeld nur Zahlen eingeben darf.


Beispiel:

<form>
<input type="text" onkeyup="if(this.value.match(/\D/)) this.value=this.value.replace(/\D/g,'')" name="nur_zahlen">
</form>

Erklärung:

Das JavaScript prüft, ob in dem Eingabefeld Buchstaben oder Sonderzeichen eintragen werden. Werden dabei andere Zeichen als Ziffern entdeckt, werden diese automatisch wieder aus dem Feld entfernt.

Mit dem nachstehenden Live Beispiel kannst du das Ganze einmal ausprobieren.



Live Beispiel:

Dieses Eingabefeld löscht Buchstaben und Sonderzeichen automatisch wieder:



Hinweis:

Der Nutzer kann nach wie vor Buchstaben und Sonderzeichen in das Feld eingeben. Das Script entfernt diese Zeichen jedoch sofort wieder. Lediglich die Ziffern bleiben dabei stehen.

Das Script funktioniert überdies nur dann, wenn der Nutzer JavaScript in seinem Browser aktiviert hat. Ist JavaScript deaktiviert oder durch ein Plugin geblockt, funktioniert das Script hingegen nicht mehr. Aber auch dafür gibt es eine Lösung.

Ein Eingabefeld nur mit Zahlen füllen – Variante mit HTML 5

HTML 5 bietet eine gute Lösung für das eben genannte Problem. Ist JavaScript im Browser blockiert, hilft das eben genannte Script auch nicht mehr. In meinem Artikel „Formulare erstellen mit HTML 5“ stelle ich dir verschiedene Möglichkeiten vor, die HTML 5 bei der Erstellung von Formularen bereit hält. Darunter ist auch das mit HTML 5 eingeführte <input type="number">. Damit hast du ebenfalls die Möglichkeit, ein Formularfeld zu erstellen, in dem der Nutzer nur Zahlen eintragen kann.

Der Nutzer brauchst dafür nichts weiter, als einen halbwegs aktuellen Browser. Somit stellt diese Vorgehensweise sogar die bessere Variante dar. Nachstehend zeige ich dir den dazu benötigten HTML Code.


Beispiel:

<form>
  <p>Nummer:</p>
  <input type="number" name="Nummer">
</form>

Erklärung:

Mit <input type="number"> erstellst du dabei ein Eingabefeld, das nur Zahlen akzeptiert. Der Nutzer kann hier zwar auch Buchstaben eintragen, allerdings markiert der Browser das Eingabefeld dann mit einer fehlerhaften Eingabe. Das Formular lässt sich dann auch nicht absenden.

Der Nachteil zur oben beschriebenen Variante mit JavaScript ist, dass der Nutzer zunächst auch Buchstaben eintragen kann. Vorteil ist allerdings, dass die Variante mit HTML aber ohne zusätzliches Script auskommt. Die Website lädt dadurch schneller und diese Variante funktioniert in jedem halbwegs modernen Browser.

Und so sieht das Ganze dann in einem Live Beispiel aus:



Live Beispiel:

Dieses Feld akzeptiert nur Zahlen:



Information:

Dieses Eingabefeld kannst du noch mit weiteren Variablen füllen. So kannst du bspw. angeben, dass die Nutzer nur bestimmte Werte auf einer Skala von-bis eintragen können. Wie das funktioniert, zeige ich dir aber im Artikel „Formulare erstellen in HTML 5“.