Wie schränkt man das Eingabefeld ein, um nur Zahlen / Ziffern int und float beides einzugeben. Manchmal müssen wir sowohl den Integer- als auch den Float-Wert für Felder wie Betrag zulassen. In diesem Fall ist die Validierung erforderlich. Es gibt keine verfügbaren Lösungen, aber sie haben einen großen Code. Brauche also einen kurzen aber effektiven Code.
%Vor%Keine Notwendigkeit für den langen Code für die Beschränkung der Zahleneingabe, versuchen Sie einfach diesen Code.
Es akzeptiert auch gültige int & amp; float beide Werte.
AKTUALISIEREN
Die obigen Antworten beziehen sich auf den häufigsten Anwendungsfall - Validierung der Eingabe als Zahl.
Aber laut Kommentaren wollen einige wenige Sonderfälle zulassen wie negative Zahlen & amp; zeigt die ungültigen Tastenanschläge vor dem Benutzer an Entfernen Sie es, so unten ist das Code-Snippet für solche spezielle Anwendungsfälle.
Sie haben gesagt, Sie brauchen einen "kurzen aber effektiven Code". Dieser Code funktioniert, und es ist nur eine Zeile!
HTML5 hat eine Funktion dafür! Das HTML input -Tag unterstützt den Attributwert type="number" . Um Dezimalstellen zuzulassen, fügen Sie dem Tag den Attributwert step="0.0001" hinzu.
Sie können auch die Attribute min und max verwenden, um den Mindestwert oder den Maximalwert festzulegen. Der step="0.0001" kann sogar kleiner sein, zum Beispiel - 0.000001 , aber 0.0001 sollte gut genug sein.
JavaScript, jQuery UI hat auch ein exaktes Match-Widget von dem, was Sie wollen: jQuery UI Spinner , plus Inkrement-Buttons.
> Bearbeiten: step="any" wird jetzt in Firefox unterstützt, so dass Sie so viele Dezimalstellen eingeben können wie Sie möchten.
Erste Dinge zuerst. Ich bevorzuge es, die ungültigen Tastenanschläge zu zeigen, anstatt sie zu verhindern. User Experience Stack Exchange scheint im Moment zu stimmen ( siehe diese Frage ).
Das stimmt, nicht alle stimmen zu, also lass uns sehen, was wir tun können.
Sekunde. Dies ersetzt keinen Validierungsschritt. Es gibt bestimmte gültige Tastenkombinationen, die keine gültigen Nummern sind, aber erlaubt sein müssen, um gültige Nummern einzugeben. Zum Beispiel könnte der Benutzer eine Dezimalmarke eingeben (Punkt oder Komma, abhängig von der Sprache, die er verwendet), und dann das Textfeld verlassen, und Sie haben keine gültige Nummer. Die folgenden Strings sind alle Starts von Zahlen, aber noch nicht gültig:
Die ersten beiden sind der Anfang von .5 oder -.5, während die letzten beiden in den verschiedenen Sprachen dieselben sind, die ein Komma anstelle eines Punktes für die Dezimalmarke verwenden.
Das bringt uns zu dem (schon abgelehnten)
Natürlich müssen Sie ein JavaScript-Skript einfügen, um nicht-moderne Browser zu reparieren, aber diese sind verfügbar. Theoretisch sollten diese auch korrekt funktionieren, wenn der Benutzer in einer Sprache arbeitet, in der das Komma anstelle des Dezimalzeichens verwendet wird. Noch besser, da die Benutzer normalerweise nur einen Browser verwenden und da sie daran gewöhnt sind, wie die Eingangsnummer in diesem Browser funktioniert, und da sie den größten Teil ihrer Zeit auf anderen Webseiten verbringen, können sie verwirrt werden, wenn Ihre Website dies nicht tut verhalten sich wie gewohnt.
Aber vielleicht möchten Sie immer noch Ihre eigene Lösung machen. Wenn alles andere fehlschlägt, würde ich mit einem regulären Ausdruck gehen (ja, ich weiß, ich habe jetzt zwei Probleme). Ich glaube nicht, Leerzeichen zuzulassen, also beschränke ich sie auf ein negatives Vorzeichen, Ziffern und eine Dezimalstelle (je nachdem, was sie verwenden). Zum Beispiel:
Das funktioniert fast. Das einzige Problem, das ich jetzt habe, ist, dass jedes Zeichen, das Sie eingeben, am Ende der Zeichenfolge steht. Das ist in Ordnung außer dem '-' für negative Zahlen, das nur am Anfang erlaubt ist. Sie können also -5.4 eingeben, aber wenn Sie 5.4 eingeben und dann die Home-Taste oder den linken Pfeil wieder an den Anfang drücken, lässt es Sie nicht negativ werden.
Es wird sich auch nicht um das Einfügen kümmern. Einfügen ist ein kompliziertes Thema. Ich bin nicht damit einverstanden, alle Einfügeoperationen abzulehnen. Ich denke, die beste Option ist hier, den Benutzer einfach einfügen zu lassen und den Validator ungültige Zahlen aufnehmen zu lassen.
Sie können dem Eingabefeld ein Attribut pattern hinzufügen. Wenn der Eingabewert nicht mit dem Muster übereinstimmt, können Sie das Eingabefeld formatieren und / oder eine Fehlermeldung anzeigen, indem Sie den css selector :invalid :
Einige Anmerkungen:
type='tel' lässt mobile Browser eine Zahlentastatur öffnen, aber Sie können den Typ natürlich auch auf text setzen. pattern : Ссылка
:invalid css-Selektor: Ссылка
1.23e4 . Rufen Sie eine jquery Funktion in onkeypress der Textbox auf. Verwenden Sie in dieser Funktion den entsprechenden ASCII-Code, um die Eingabe einzuschränken.
Der Benutzer kann in js keinen Dezimalwert eingeben. Verwenden Sie diesen Code:
%Vor%Tags und Links javascript jquery validation floating-point numbers