HTML-Eingabefeld mit jQuery nur mit Zahlen zulassen?
<div class="col-sm-6">
<div class="form-group">
<label for="Bauherr_PLZ">PLZ</label>
<input type="text" class="form-control" maxlength="5" onKeyUp="zahl()" value="{if isset($values.Bauherr_PLZ)}{$values.Bauherr_PLZ}{/if}" name="Bauherr_PLZ" />
</div>
</div>
es soll aer nicht so ausehen!
4 Antworten
Dafür benötigst du kein jQuery. Du kannst das pattern-Attribut stattdessen nutzen.
<form>
<input pattern="\d+">
<input type="submit">
</form>
Textersetzungen während der Eingabe würde ich nicht unbedingt empfehlen, denn das ist ein vermeidbares nutzerunfreundliches Verhalten. Schreibe dem Nutzer stattdessen eine entsprechende Information in ein Label, o.ä., dass du nur numerische Eingaben erwartest und prüfe mit Versand der Daten (und natürlich auch nochmal danach / vor der Evaluation).
Dieser Lösung ist das number-Feld vorzuziehen. Das Aussehen lässt sich mit CSS zwar beeinflussen: How to: Hide arrow number, allerdings kannst du dafür nicht vollen Browsersupport erwarten (siehe hier).
<input oninput="this.value = this.value.replace(/\D+/g, '')">
Also alles ausser Zahlen?
Das ginge so:
<input oninput="this.value = this.value.replace(/\d+/g, '')">
(Unterschied: Beim Replace ein kleines \d anstatt einem großen \D. \D = Zahlen, \d = Alles ausser Zahlen)
Oder meinst du nur Englische Buchstaben? (A-Z, a-z)
letzte Frage: wie mache ich es z.B. bei eine Telefonnummer mit Zahlen und Sonderzeichen 0176-123445
Welche Sonderzeichen können denn da vorkommen? Plus, Minus, Leertaste, und vlt. noch Klammern bei englischen Nummern, oder?
Das wäre dann:
<input oninput="this.value = this.value.replace(/[^0-9\-\+ \(\)]+/g, '')">
Bzw. so wäre es ohne Klammern (nur Plus, Minus und Leertaste):
<input oninput="this.value = this.value.replace(/[^0-9\-\+ ]+/g, '')">
Mach einfach ein inputn vom Typ number.
<input type="number"\>
<input type="number"\>
wenn ich es so schreibe, dann kommen seitlich zwei Pfeile und man kann immer noch Buchstaben eintippen!
Bei mobilen Endgeräten gibt es dann eine spezial Tastatur nur mit Zahlen.
Doch, das will er schon und type="number" auch richtig – reicht aber nicht aus. Man muss die Eingabe trotzdem noch überprüfen und ggf. korrigieren oder einen Fehler bringen.
Dann musst du das validieren. https://jsfiddle.net/stL3x517/3/
Er will, dass die Eingabe nur Zahlen zulässt.
Inwiefern lässt type=number nur zahlen zu?
Nein, type=number ist nicht, was er braucht. Er braucht JS Code, der alles ausser Zahlen aus der value löscht.
Naja, dann muss er ein type=number und ein bisschen regex magie machen
https://jsfiddle.net/stL3x517/3/
Das sollte nur Zahlen erlauben also nicht +5 oder -3.5
Vieeeel zu umständlich xD
Here, take this:
<input oninput="this.value = this.value.replace(/\D+/g, '')">
Das entfrent ja aber ungefragt. Meins lässt den User selbst zu erkentniss gelangen xd
Ahja und boxshadows sind bombe
Und deshalb schrieb ich auch, dass es alleine nicht ausreicht, da es nicht vor fehlerhaften Eingaben schützt. Trotzdem ist type="number" aber generell richtig, da damit eben bspw. bei Smartphones eine extra Tastatur mit Zahlen angezeigt wird, was man in diesem Fall ja will.
Davon abgesehen ist es eigentlich nie eine gute Idee, direkt bei der Eingaben zu überprüfen und die Nutzereingabe zu verändert. Besser ist es, den Nutzer eine Fehlermeldung zu geben, wenn falsche Zeichen eingegeben wurden und die entsprechende Aktion nicht zu starten.
Dann ist es immernoch viel zu umständlich. xD
Für das was du machst braucht man kein JavaScript:
<input type="number" id="mynum" pattern="\D+">
#mynum:invalid {
box-shadow: 0px 0px 15px 8px #FF0000;
}
Dafür waren meine css skils zu schlecht ;) Und der Fragesteller hatte mich auf js gelenkt.
Dann sag mir mal, wie du mit type=number den Input filtern willst...
Falls es dir noch nicht aufgefallen ist, wenn man type=number setzt, dann ist die Value immer ein leerer String, wenn der Input etwas anderes als Nummern enthält.
Wie willst du das also Filtern? Wie willst du an den Wert kommen, der im Input steht?
Du kannst die Input-Box dann höchstens Farbig markieren, wie in whgoffline's Beispiel. Aber du kannst dann nicht die Buchstaben aus dem Input entfernen.
Naja, die Idee hinter dem number ist ja eher die Numpad tastatur unter z.B. Android. Ein '"" ist ja auch keine Zahl also würde wahrscheinlich ein check auf i.value!="" reichen
Dann ist das Feld halt auch Rot wenn es leer ist.
Und es geht um's filtern, also dass Buchstaben garnicht erst im Input erscheinen.
Wenn ich jetzt "123a" eingebe, wie will man davon das "a" entfernen? Willste dann die komplette Eingabe löschen?
Filtern + type=number = Unmöglich.
Aus welchem Grund sollte Javascript bei type="number" nicht funktionieren? So kann es bspw. aussehen:
Das ist bei diesem Beispiel nebensächlich und macht auch in Safari Probleme. Es geht hier nur um das Prinzip, wie man es umsetzen könnte.
- Da kann man Buchstaben eingeben. So wie ich die Frage verstehe (und basierend auf den Antworten des Fragestellers habe ich sie richtig verstanden), will er, dass man nur Zahlen eingeben kann. Die Eingabe dementsprechend zu Filtern ist bei input="number" unmöglich.
- Das Feld wird auch dann rot markiert, wenn es leer ist. Unschön.
- Dann kann man auch einfach gleich das Pattern-Attribut benutzen.
Zum letzen mal: type="number" ist nicht wirklich zum Filter gedacht und ich habe lediglich gesagt, dass dies zusätzlich nützlich ist. Nichts ist am Smartphone nerviger, als wenn man in einem Feld nur Zahlen eingeben darf aber die komplette Tastatur angeboten wird.
Dass der Fragesteller nur Zahlen eingeben will, habe ich auch verstanden. Deshalb aber mein Hinweis, dass dies bad practice ist und nur selten empfehlenswert. Nutzer können diese leicht als Bug ansehen, da sie bei Falscheingaben kein Feedback bekommen und einfach nur nichts passiert.
Das pattern-Attribut ist sicherlich auch eine Möglichkeit und wird soweit ich es sehe auch gut unterstützt. Mir persönlich ist es aber meist zu unflexibel. In diesem Fall wäre es aber definitiv auch eine gute Option.
Zum letzen mal: type="number" ist nicht wirklich zum Filter gedacht und ich habe lediglich gesagt, dass dies zusätzlich nützlich ist.
type="number" ist zusätzlich zum Filter aber garnicht möglich. That's my point. Du kannst nicht die Eingabe filtern und gleichzeitig type="number" haben. Auf mehr wollte ich garnicht hinaus. Mit dem Rest hast du natürlich recht.
type="number" ist zusätzlich zum Filter aber garnicht möglich. That's my point.
Doch, auch das ist möglich. Du darfst dann nur nicht auf das input-Event triggern, sondern auf keydown:
Viel Spaß das jetzt irgendwie mit Cut-Copy-Paste kompatibel zu machen. xD
Not worth it in meinen Augen, da hab ich lieber type="text" und 15 Minuten weniger Arbeit.
… und außerdem hast du verärgerte Smartphone-Nutzer.
Es bleibt aber dabei, dass eine direkte Filterung der Eingabe bad practice und unnötig ist. Soll jeder machen wie er will aber die Nutzer werden es einem nicht danken.
So sollte es gehen, oder?
<input inputmode="numeric" oninput="this.value = this.value.replace(/\D+/g, '')" />
ich denke dann sollte beim Smartphone-Nutzer ein Zahlen-Keyboard geöffnet werden.
Warum muss das mit jQuery gemacht werden?
Gib dem input doch einfach type number.
Dann kann man immernoch Buchstaben eingeben.
Aber ja, JQuery ist dafür echt richtig übertrieben, das ist eine Zeile JavaScript.
Danke es geht, jetzt so ein Frage: wenn man nur Buchstaben oder Sonderzeichen haben will, was muss man dann eintippen?