Was ist der beste Weg, um die Eingabe "nur" für Textfelder einzuschränken?
Ich suche etwas, das Dezimalstellen erlaubt.
Ich sehe viele Beispiele. Aber ich muss mich noch entscheiden, welches ich verwenden soll.
Update von Praveen Jeganathan
Keine Plugins mehr, jQuery hat jQuery.isNumeric()
in Version 1.7 eigene Plugins implementiert . Siehe: https://stackoverflow.com/a/20186188/66767
jquery
validation
isnumeric
wenbert
quelle
quelle
Antworten:
Aktualisieren
Hierfür gibt es eine neue und sehr einfache Lösung:
Sehen Sie sich diese Antwort an oder versuchen Sie es selbst auf JSFiddle .
jquery.numeric Plugin
Ich habe viele Formulare mit dem Plugin jquery.numeric erfolgreich implementiert .
Darüber hinaus funktioniert dies auch mit Textbereichen!
Beachten Sie jedoch, dass Strg + A, Kopieren + Einfügen (über das Kontextmenü) und Ziehen + Ablegen nicht wie erwartet funktionieren.
HTML 5
Mit einer breiteren Unterstützung des HTML 5-Standards können wir
pattern
Attribute undnumber
Typen fürinput
Elemente verwenden, um die Eingabe nur von Zahlen einzuschränken. In einigen Browsern (insbesondere Google Chrome) wird das Einfügen von nicht numerischen Inhalten ebenfalls eingeschränkt. Weitere Informationen zunumber
und andere neuere Eingabetypen finden Sie hier .quelle
allowDecimal
Option gibt, wann immer ich nur ganzzahlige Werte zulassen möchte. Die Quelle ist sehr einfach und gut geschrieben.type="number"
.Wenn Sie die Eingabe einschränken möchten (im Gegensatz zur Validierung), können Sie mit den Schlüsselereignissen arbeiten. etwas wie das:
Und:
Dadurch wird dem Benutzer sofort mitgeteilt, dass er keine Alpha-Zeichen usw. eingeben kann, anstatt später während der Validierungsphase.
Sie möchten weiterhin validieren, da die Eingabe möglicherweise durch Ausschneiden und Einfügen mit der Maus oder möglicherweise durch einen Formular-Autovervollständiger ausgefüllt wird, der die Schlüsselereignisse möglicherweise nicht auslöst.
quelle
$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
Ich dachte, dass die beste Antwort die oben genannte war, um dies einfach zu tun.
aber ich stimme zu, dass es ein bisschen schmerzhaft ist, dass die Pfeiltasten und die Löschtaste den Cursor an das Ende der Zeichenfolge halten (und aus diesem Grund wurde es mir beim Testen zurückgeworfen)
Ich fügte in einer einfachen Änderung hinzu
Auf diese Weise ignorieren Sie den Text einfach, wenn ein Tastendruck nicht dazu führt, dass der Text geändert wird. Mit dieser Option können Sie Pfeile drücken und löschen, ohne zum Ende zu springen, aber nicht numerischen Text werden gelöscht.
quelle
keypress
könnte verwendet werden, um dies weiter zu vereinfachen, da anscheinendkeyup
undkeydown
auf jeder Tastaturtaste ausgelöst wird, währendkeypress
nur auf "Zeichentasten" ausgelöst wird (also nicht auf dem Pfeil ausgelöst und Tasten gelöscht werden). Siehe diese Antwort als Referenz: stackoverflow.com/a/1367720/1298685Das Plugin jquery.numeric enthält einige Fehler, über die ich den Autor informiert habe. Es erlaubt mehrere Dezimalstellen in Safari und Opera, und Sie können in Opera keine Rücktaste, Pfeiltasten oder mehrere andere Steuerzeichen eingeben. Ich brauchte eine positive Ganzzahl-Eingabe, also schrieb ich am Ende nur meine eigene.
quelle
Keine Plugins mehr, jQuery hat eine eigene jQuery.isNumeric () implementiert, die in Version 1.7 hinzugefügt wurde.
Probenergebnisse
Hier ist ein Beispiel, wie Sie isNumeric () mit dem Ereignis-Listener verknüpfen
quelle
var v = this.value;
Änderung aufvar v = this.value.replace(/,/g,'');
. Zahlen wie21,345,67.800
werden ebenfalls berücksichtigt.$(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });
Das oben erwähnte numerische () Plugin funktioniert in Opera nicht (Sie können die Rück- oder Vorwärtstaste nicht zurücksetzen, löschen oder sogar verwenden).
Der folgende Code in JQuery oder Javascript funktioniert einwandfrei (und es sind nur zwei Zeilen).
JQuery:
Javascript:
Dies gilt natürlich nur für rein numerische Eingaben (plus Rücktaste, Löschen, Vorwärts- / Rückwärts-Tasten), kann jedoch leicht geändert werden, um Punkte und Minuszeichen einzuschließen.
quelle
Sie können das Validierungs-Plugin mit seiner number () -Methode verwenden.
quelle
Javascript-Ansatz
jQuery-Ansatz
AKTUALISIEREN
Die obigen Antworten gelten für den häufigsten Anwendungsfall - Validierung der Eingabe als Zahl.
quelle
Unten ist, was ich benutze, um die Tastenanschläge buchstäblich zu blockieren. Dies erlaubt nur Zahlen 0-9 und einen Dezimalpunkt. Einfach zu implementieren, nicht viel Code und funktioniert wie ein Zauber:
quelle
charCode != 46
aus der if-Anweisung entfernen . Gute Antwort!Als leichte Verbesserung dieses Vorschlags können Sie das Validierungs-Plugin mit seinen Methoden für Nummer () , Ziffern und Bereich verwenden. Folgendes stellt beispielsweise sicher, dass Sie eine positive Ganzzahl zwischen 0 und 50 erhalten:
quelle
Sie sehen kein magisches Aussehen und Verschwinden von Alphabeten auf der Taste. Dies funktioniert auch beim Einfügen mit der Maus.
quelle
/[^0-9.]/g
Ich habe zuerst versucht, dies mit jQuery zu lösen, aber ich war nicht glücklich darüber, dass unerwünschte Zeichen (nicht Ziffern) tatsächlich im Eingabefeld angezeigt wurden, bevor sie beim Keyup entfernt wurden.
Auf der Suche nach anderen Lösungen habe ich Folgendes gefunden:
Ganzzahlen (nicht negativ)
Quelle: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Live-Beispiel: http://jsfiddle.net/u8sZq/
Dezimalstellen (nicht negativ)
Um einen einzelnen Dezimalpunkt zuzulassen, können Sie Folgendes tun:
Quelle: Hab das gerade geschrieben. Scheint zu funktionieren. Live-Beispiel: http://jsfiddle.net/tjBsF/
Andere Anpassungen
Einige Dinge, an denen Sie interessiert sein könnten:
Mängel
Ich weiß, dass der Titel nach jQuery-Lösungen fragt, aber hoffentlich findet jemand dies trotzdem nützlich.
quelle
Danke für den Beitrag Dave Aaron Smith
Ich habe Ihre Antwort so bearbeitet, dass sie Dezimalstellen und Zahlen aus dem Zahlenbereich akzeptiert. Diese Arbeit ist perfekt für mich.
quelle
Und wenden Sie dies auf alle gewünschten Eingaben an:
quelle
HTML5 unterstützt die Eingabetypnummer mit einer globalen Browserunterstützung von 88% + laut CanIUse ab Oktober 2015.
Dies ist keine JQuery-bezogene Lösung, aber der Vorteil ist, dass auf Mobiltelefonen die Android-Tastatur für die Eingabe von Zahlen optimiert wird.
Alternativ ist es möglich, Text vom Eingabetyp mit dem neuen Parameter "Muster" zu verwenden. Weitere Details in der HTML5-Spezifikation.
Ich denke, es ist besser als jquery-Lösung, da in dieser Frage vorausgesetzt, jquery-Lösung nicht Tausende Trennzeichen unterstützen. Wenn Sie HTML5 verwenden können.
JSFiddle: https://jsfiddle.net/p1ue8qxj/
quelle
Diese Funktion macht dasselbe und verwendet einige der oben genannten Ideen.
quelle
/ * Dies ist meine browserübergreifende Version von Wie kann ich mit jQuery nur numerische (0-9) in HTML-Eingabefeldern zulassen?
* /
quelle
Führen Sie den Inhalt einfach über parseFloat () aus. Es wird
NaN
bei ungültiger Eingabe zurückgegeben.quelle
Sie können autoNumeric von decorplanit.com verwenden . Sie haben eine gute Unterstützung für numerische sowie Währung, Rundung usw.
Ich habe in einer IE6-Umgebung mit wenigen CSS-Verbesserungen verwendet, und es war ein vernünftiger Erfolg.
Beispielsweise könnte eine CSS-Klasse
numericInput
definiert und zum Dekorieren Ihrer Felder mit den numerischen Eingabemasken verwendet werden.angepasst von der autoNumeric Website:
quelle
Ich denke, dies ist eine gute Möglichkeit, dieses Problem zu lösen, und es ist äußerst einfach:
Beispiel: JSFiddle
Abgedeckte Szenarien
Die meisten ähnlichen Empfehlungen schlagen hier mindestens eine dieser Empfehlungen fehl oder erfordern viel Code, um alle diese Szenarien abzudecken.
home
,end
und diearrow
Tasten.delete
undbackspace
kann an jedem Index verwendet werden.keyup
Ereignis nicht verwendet wird.Szenarien fehlgeschlagen
0.5
und Löschen nur der Null funktioniert nicht. Dies kann behoben werden, indem Sie den regulären Ausdruck in ändern/^[0-9]*\.?[0-9]*$/
und dann ein Unschärfeereignis hinzufügen, um ein vorangestellt zu haben,0
wenn das Textfeld mit einem Dezimalpunkt beginnt (falls gewünscht). In diesem erweiterten Szenario finden Sie eine bessere Vorstellung davon, wie dies behoben werden kann.Plugin
Ich habe dieses einfache JQuery-Plugin erstellt , um dies zu vereinfachen:
quelle
Am besten überprüfen Sie die Inhalte des Textfelds, wenn es den Fokus verliert.
Sie können mit einem regulären Ausdruck überprüfen, ob der Inhalt eine "Zahl" ist.
Oder Sie können das Validierungs-Plugin verwenden, das dies grundsätzlich automatisch erledigt.
quelle
Überprüfen Sie diesen Suchcode für die Verwendung in der Datenbank:
quelle
Dies ist ein Ausschnitt, den ich gerade gemacht habe (unter Verwendung eines Teils des Codes von Peter Mortensen / Keith Bentrup) für eine ganzzahlige prozentuale Validierung in einem Textfeld (jQuery ist erforderlich):
Dieser Code:
Ich hoffe, das hilft den Bedürftigen.
quelle
Hier finden Sie eine großartige Lösung: http://ajax911.com/numbers-numeric-field-jquery/
Ich habe gerade das "Keyup" gemäß meiner Anforderung in "Keydown" geändert
quelle
Wenn Sie HTML5 verwenden, müssen Sie keine großen Anstrengungen unternehmen, um die Validierung durchzuführen. Benutz einfach -
Das step-Attribut ermöglicht die Gültigkeit des Dezimalpunkts.
quelle
Andere Möglichkeit, die Caret-Position am Eingang beizubehalten:
Vorteile:
Plunker: Demo funktioniert
quelle
Ich habe gerade ein noch besseres Plug-In gefunden. Gibt Ihnen viel mehr Kontrolle. Angenommen, Sie haben ein DOB- Feld, in dem es numerisch sein muss, das aber auch "/" oder "-" Zeichen akzeptiert.
Es funktioniert super!
Überprüfen Sie es auf http://itgroup.com.ph/alphanumeric/ .
quelle
Dieser Code hat bei mir ziemlich gut funktioniert, ich musste nur die 46 im controlKeys-Array hinzufügen, um den Punkt zu verwenden, obwohl ich nicht denke, dass dies der beste Weg ist;)
quelle
Ich habe dies mit guten Ergebnissen verwendet.
quelle
Dies ist sehr einfach, da wir bereits eine in Javascript eingebaute Funktion "isNaN" haben.
quelle