Input Type="number" für Geld (nur Zahlen kein e, -, +,...)

[Timer]

Hey,
ich erstelle gerade ein Input Feld, wo man einen Betrag eingeben kann (in €). Ich würde jedoch ganz gerne machen, dass man Zeichen wie e, -, + usw. von Anfang an nicht eingeben kann (da kann man ja auch nicht z.B. "z" eingeben). Kann man das irgendwie machen?
Ich will am besten nicht, dass da dann ne Fehlermeldung kommt, sondern dass die Eingabe nicht getätigt wird.
Ich hab zwar ne Idee, jedoch ist die ein paar Zeilen lang (bei jeder Eingabe abfragen, ob es eine Zahl oder ein Komma ist und falls nicht die letzt Eingabe löschen lassen) und ich weiß net, ob das besser geht.

 

[scbawik]

Hey,
ich erstelle gerade ein Input Feld, wo man einen Betrag eingeben kann (in €). Ich würde jedoch ganz gerne machen, dass man Zeichen wie e, -, + usw. von Anfang an nicht eingeben kann (da kann man ja auch nicht z.B. "z" eingeben). Kann man das irgendwie machen?
Ich will am besten nicht, dass da dann ne Fehlermeldung kommt, sondern dass die Eingabe nicht getätigt wird.
Ich hab zwar ne Idee, jedoch ist die ein paar Zeilen lang (bei jeder Eingabe abfragen, ob es eine Zahl oder ein Komma ist und falls nicht die letzt Eingabe löschen lassen) und ich weiß net, ob das besser geht.

https://www.w3schools.com/tags/att_input_pattern.asp

Ich persönlich verwende die neuen Typen nicht. Macht meistens nur mehr Arbeit als Nutzen.

 

[Aaron3219]

Du setzt einen Event-Listener, der bey keypress überprüft, welcher Key gedrückt wurde.

Der Code für dafür sähe dann so aus:

$('input.Class').keypress(function(e) {
    if(!(e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 44)) {
        e.preventDefault();
    
        //Da könntest du z.B. ein e.preventDefault() oder so hinmachen.
        //Oder auch sonst irgendwas. Was auch immer du willst.
        //48 - 57 ist ist im Übrigen 0-9. Da gibt es Listen im Internet. https://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
        //44 ist ein Komma.
    }
})

 

[Timer]

@scbawik
Da kann ich dann leider auch die anderen Buchstaben eingeben (z.B. e oder +) und da wird dann erst ein Fehler angezeigt, wenn ich absenden drücke. Ich hätte jedoch ganz gerne, dass, wenn man z.B. e drückt, der Buchstabe im Input gar nicht hinzugefügt wird

@Aaron3219
Das ist das was ich anfangs meinte. Gibt wohl keinen anderen Weg. Dann muss ich wohl das machen (falls keine anderen Vorschläge mehr kommen)

Danke für die Hilfe

 

[basti1012]

habe gerade bei codepen type=number getestet und ich kann da nur zahlen und keine Buchstaben reinschreiben.
Wenn ich ein Buchstabe drücke der wird gar nicht erst angezeigt.
Mitlerweile glaube ich das mein Browser wunderlich ist.
EDIT eine E und + - geht doch sont keine buchstaben

 

[Timer]

Ich kann auch keine Buchstaben eingeben bis auf "e". Das was ich einen Beitrag von mir zuvor meinte, war auf die Vorschläge bezogen

 

[Timer]

Ich hab jetzt noch ein kleines Problem, weswegen es sich nicht lohnt, einen neuen Thread aufzumachen:
Ich habe ein Div (und darin ein Input) in einem Form drin und nun kann ich, wenn ich ins Input klicke, das Form nicht absenden. Ich muss zum Absenden den Submit Button/Input anklicken. Woran liegt das?

<form>
    <div><input id="betrag" name="betrag" type="number" min="2" step="0.01" placeholder="Betrag" required></div>
    <input id="send" type="submit" value="Absenden">
</form>

Wenn ich das Div entferne und nur die beiden Inputs im Form stehen lass, funktioniert das mit dem Enter Drücken wieder.
PS:
Das Div brauche ich, um ein € hinter dem Input auf gleicher Höhe anzeigen lassen zu können

 

[basti1012]

nimm doch mal p oder span und kein div.Was passiert den dann? Also p Elemente sollten eigentlich nicht stören.Zumindest sind mir da noch nie Fehler aufgefallen
Edit sehe gerade du hast das div um den input. Mache das div doch hinter den input und verschieb die höhe mit margin.
Aber bei mir geht es trotzdem mit enter so wie du es hast.

Wegen dein ersten Problem,frag doch das feld ab mit isNaN

 

[Timer]

@basti1012
Ich habe jetzt bemerkt, dass, wenn ich das DIV lösche und nur das Form da stehen lass und darin die 2 Inputs, es nicht geht. Und ich hab auch die Lösung: ich habe ja ein ähnliches Skript wie @Aaron3219 benutzt und da wird ja das Enter einfach gelöscht ^^ Hab ich direkt behoben
Das mit isNaN wäre auch ne Lösung. Ich nehme jetzt jedoch die von @Aaron3219, da das am wenigsten Arbeit ist (da ich noch was mit Javascript mit dem Input machen werde und da muss ich halt kurz was umschreiben, wovon ich dachte, dass es recht lange dauert. War jedoch nun doch nur ein Aufwand von 1-2min)
Danke für eure Hilfe