Ich erstelle eine Webseite, auf der ich ein Eingabetextfeld habe, in dem ich nur numerische Zeichen wie (0,1,2,3,4,5 ... 9) 0-9 zulassen möchte.
Wie kann ich das mit jQuery machen?
jquery
html
validation
numeric
Prashant
quelle
quelle
Antworten:
Hinweis: Dies ist eine aktualisierte Antwort. Die folgenden Kommentare beziehen sich auf eine alte Version, die mit Schlüsselcodes herumgespielt hat.
jQuery
Probieren Sie es selbst auf JSFiddle .
Es gibt keine native jQuery-Implementierung dafür, aber Sie können die Eingabewerte eines Textes
<input>
mit dem folgendeninputFilter
Plugin filtern (unterstützt Kopieren + Einfügen, Ziehen + Ablegen, Tastaturkürzel, Kontextmenüoperationen, nicht typisierbare Tasten, die Caret-Position usw.) Tastaturlayouts und alle Browser seit IE 9 ):Sie können jetzt das
inputFilter
Plugin verwenden, um einen Eingabefilter zu installieren:Weitere Beispiele für Eingabefilter finden Sie in der JSFiddle-Demo . Beachten Sie auch, dass Sie noch eine serverseitige Validierung durchführen müssen!
Reines JavaScript (ohne jQuery)
jQuery wird dafür eigentlich nicht benötigt, das gleiche können Sie auch mit reinem JavaScript machen. Siehe diese Antwort .
HTML 5
HTML 5 bietet eine native Lösung mit
<input type="number">
(siehe Spezifikation ). Beachten Sie jedoch, dass die Browserunterstützung unterschiedlich ist:step
,min
undmax
Attribute.e
undE
das Feld eingeben . Siehe auch diese Frage .Probieren Sie es selbst auf w3schools.com .
quelle
Hier ist die Funktion, die ich benutze:
Sie können es dann an Ihre Steuerung anhängen, indem Sie Folgendes tun:
quelle
return this.each(function()
?each
vonreturn this.each(function()
ist, mehrere Objekte zuzulassen, wie HaggleLad sagte, und derreturn
Teil besteht darin, das jQuery-Objekt an den Aufrufer zurückzugeben, um eine Verkettung wie$("input[type='text'").ForceNumericOnly().show()
In der Reihe:
Unauffälliger Stil (mit jQuery):
quelle
onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
./[^0-9]|^0+(?!$)/g
um führende Nullserien zu verhindern.Sie können einfach einen einfachen regulären JavaScript-Ausdruck verwenden, um auf rein numerische Zeichen zu testen:
Dies gibt true zurück, wenn die Eingabe numerisch ist, oder false, wenn nicht.
oder für den Ereignisschlüsselcode einfach unten verwenden:
quelle
Sie können ein Eingabeereignis wie folgt verwenden:
Aber was ist dieses Codeprivileg?
quelle
decimal
zwischen0.0
bis24.0
ich bin nicht in der Lage den geben zu lassen.
this.value = Number(this.value.replace(/\D/g, ''));
Kurz und bündig - auch wenn dies nach mehr als 30 Antworten nie viel Aufmerksamkeit findet;)
quelle
Verwenden Sie die JavaScript-Funktion isNaN ,
if (isNaN (document.getElementById ('inputid'). val ()))Update: Und hier ein schöner Artikel, der darüber spricht, aber jQuery verwendet: Eingabe in HTML-Textfeldern auf numerische Werte beschränken
quelle
document.getElementById('inputid').val()
Alter .. das ist immer noch jquery..val()
ist eine Frage. use.value
isNaN
alleinige Verwendung ist aufgrund von JavaScript-Zwang eine schlechte Idee.decimal
zwischen0.0
bis24.0
ich bin nicht in der Lage den geben zu lassen.
Quelle: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
quelle
Ich benutze dies in unserer internen gemeinsamen js-Datei. Ich füge die Klasse einfach zu jeder Eingabe hinzu, die dieses Verhalten benötigt.
quelle
Einfacher ist für mich
quelle
this.value.replace(/[^0-9\.]/g,'');
OP-Anforderungen von 0-9Warum so kompliziert? Sie benötigen jQuery nicht einmal, da es ein HTML5-Musterattribut gibt:
Das Coole ist, dass auf Mobilgeräten eine numerische Tastatur angezeigt wird, was weitaus besser ist als die Verwendung von jQuery.
quelle
Mit dieser sehr einfachen Lösung können Sie dasselbe tun
Ich habe auf diesen Link für die Lösung verwiesen . Es funktioniert perfekt !!!
quelle
decimal
zwischen0.0
bis24.0
ich bin nicht in der Lage den geben zu lassen.
Sie können die Eingabe der HTML5- Nummer versuchen :
Für nicht kompatible Browser gibt es Modernizr- und Webforms2- Fallbacks.
quelle
Das Musterattribut in HTML5 gibt einen regulären Ausdruck an, gegen den der Wert des Elements geprüft wird.
Hinweis: Das Musterattribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Telefon, E-Mail und Kennwort.
[0-9] kann durch jede Bedingung für reguläre Ausdrücke ersetzt werden.
{1,3} steht für mindestens 1 und maximal 3 Ziffern können eingegeben werden.
quelle
decimal
zwischen0.0
bis24.0
ich bin nicht in der Lage den geben zu lassen.
Etwas ziemlich Einfaches mit jQuery.validate
quelle
Funktion unterdrückenNonNumericInput (Ereignis) {
quelle
decimal
zwischen0.0
bis24.0
ich bin nicht in der Lage den geben zu lassen.
Ich bin zu einer sehr guten und einfachen Lösung gekommen, die den Benutzer nicht daran hindert, Text auszuwählen oder einzufügen, wie dies bei anderen Lösungen der Fall ist. jQuery-Stil :)
quelle
Sie können diese JavaScript-Funktion verwenden:
Und Sie können es wie folgt an Ihr Textfeld binden:
Ich verwende das oben genannte in der Produktion und es funktioniert perfekt und es ist browserübergreifend. Darüber hinaus hängt es nicht von jQuery ab, sodass Sie es mit Inline-JavaScript an Ihr Textfeld binden können:
quelle
Ich denke, es wird allen helfen
quelle
if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
Ich habe meine basierend auf dem obigen Beitrag von @ user261922 geschrieben, leicht modifiziert, so dass Sie alle auswählen können, Registerkarte und mehrere "Nur-Zahlen" -Felder auf derselben Seite verarbeiten können.
quelle
Hier ist eine schnelle Lösung, die ich vor einiger Zeit erstellt habe. Sie können mehr darüber in meinem Artikel lesen:
http://ajax911.com/numbers-numeric-field-jquery/
quelle
Sie möchten die Registerkarte zulassen:
quelle
Hier ist eine Antwort, die die jQuery UI Widget Factory verwendet. Sie können leicht anpassen, welche Zeichen zulässig sind.
Das würde Zahlen, Zahlenzeichen und Dollarbeträge erlauben.
quelle
Das scheint unzerbrechlich.
quelle
Stellen Sie sicher, dass auch der Ziffernblock und die Tabulatortaste funktionieren
quelle
Ich wollte ein wenig helfen und habe meine Version gemacht, die
onlyNumbers
Funktion ...Fügen Sie einfach das Eingabe-Tag "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." hinzu und Sie sind fertig;)
quelle
Ich würde auch gerne antworten :)
Das war's ... nur Zahlen. :) Fast kann es nur mit der "Unschärfe" funktionieren, aber ...
quelle
Ein einfacher Weg, um zu überprüfen, ob der eingegebene Wert numerisch ist, ist:
quelle
Sie müssen diese Methode nur in Jquery anwenden, und Sie können Ihr Textfeld so validieren, dass nur Zahlen akzeptiert werden.
Versuchen Sie diese Lösung hier
quelle
Sie können die Eingabe der HTML5-Nummer versuchen:
Dieses Eingabe-Tag-Element würde jetzt nur einen Wert zwischen 0 und 9 annehmen, da das Attribut min auf 0 und das Attribut max auf 9 gesetzt ist.
Weitere Informationen finden Sie unter http://www.w3schools.com/html/html_form_input_types.asp
quelle