Wie kann man mit jQuery nur numerische (0-9) in HTML-Eingabefeldern zulassen?

901

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?

Prashant
quelle
73
Beachten Sie, dass Sie sich nicht auf die clientseitige Validierung verlassen können. Sie müssen auch auf dem Server validieren, falls der Benutzer JavaScript deaktiviert hat oder keinen JavaScript-kompatiblen Browser verwendet.
CJK
45
Hast du über HTML5 nachgedacht? <input type = "number" />. Mit
Min-
5
Ich denke, Sie sollten beim Keyup-Ereignis nach Eingabewerten suchen und nicht nach Keycodes, da dies bei Unterschieden bei Tastaturen und was nicht viel zuverlässiger ist.
Richard
13
Ich stimme Richard voll und ganz zu: Verwenden Sie keine Schlüsselcodes. Die akzeptierte Antwort funktioniert beispielsweise auf französischen Tastaturen nicht, da Sie die Umschalttaste drücken müssen, um Zahlen auf diesen Tastaturen einzugeben. Keycodes sind meiner Meinung nach einfach zu riskant.
MiniQuark
3
@ ZX12R Funktioniert in keiner aktuellen Version von IE. Es ist schön und gut, den neuesten Code für Ihre eigenen Sachen zu verwenden, um frisch zu bleiben, aber dies ist nicht wirklich eine Option für fast jedes professionelle Projekt. caniuse.com/#feat=input-number
Eric

Antworten:

1260

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 folgenden inputFilterPlugin 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 ):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

Sie können jetzt das inputFilterPlugin verwenden, um einen Eingabefilter zu installieren:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

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:

  • Die meisten Browser überprüfen die Eingabe nur beim Senden des Formulars und nicht beim Eingeben.
  • Die meisten mobilen Browser unterstützen nicht die step, minund maxAttribute.
  • In Chrome (Version 71.0.3578.98) kann der Benutzer weiterhin die Zeichen eund Edas Feld eingeben . Siehe auch diese Frage .
  • Mit Firefox (Version 64.0) und Edge (EdgeHTML Version 17.17134) kann der Benutzer weiterhin beliebigen Text in das Feld eingeben .

Probieren Sie es selbst auf w3schools.com .

emkey08
quelle
45
Vielen Dank! event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 wenn Sie Dezimalstellen wollen
Michael L Watson
9
Fügen Sie die Schlüsselcodes 37 und 39 hinzu, um die Navigation nach links und rechts im txt-Feld zu ermöglichen. Beispiel: if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
Anthony Queen
22
ooo, habe gerade ein Problem dafür von unseren Testern aufgegriffen. Sie müssen verhindern, dass der Benutzer die Umschalttaste gedrückt hält und die Zifferntasten drückt, da sonst die Eingabe zulässig ist! @ # $% ^ & * ()
Allen Rice
6
Bestätigt den Shift + Bug. Außerdem erlaubt ALT + Ziffernblock so ziemlich alles (dh Alt + 321 = A, Alt + 322 = B usw.). Ein weiterer Fall für die serverseitige Validierung.
Anthony Queen
140
Ich bin mit dieser Antwort wirklich nicht einverstanden: Es ist wirklich zu riskant, mit Schlüsselcodes zu spielen, weil Sie nicht sicher sein können, wie das Tastaturlayout ist. Auf französischen Tastaturen müssen Benutzer beispielsweise die Umschalttaste drücken, um Zahlen einzugeben. Dieser Code funktioniert also überhaupt nicht. Gehen Sie also bitte zur Validierung anstelle dieses Keycode-Hacks.
MiniQuark
182

Hier ist die Funktion, die ich benutze:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Sie können es dann an Ihre Steuerung anhängen, indem Sie Folgendes tun:

$("#yourTextBoxName").ForceNumericOnly();
Kelsey
quelle
2
Ich fand das nützlich, aber ich fand einen nervigen "Bug". Wenn ich dies auf meinem iMac verwende, erlaubt es einen Buchstaben wie a und e. Es scheint, als ob die Tastaturnummern auf dem PC Buchstaben auf dem iMac sind und die Mac-Tastatur mit den normalen Nummern identisch ist. Weiß jemand, wie man es sowohl auf Mac als auch auf PC funktioniert?
Volmar
3
Die Tasten "Home", "End" funktionieren ebenfalls nicht. Dies ist eine bessere Lösung, die Peter vorgeschlagen hat: west-wind.com/weblog/posts/2011/Apr/22/…
bman
Warum gibt es eine return this.each(function() ?
Powtac
2
@powtac - damit Sie .ForceNumericOnly () für mehrere Objekte aufrufen können. Zum Beispiel ... $ ("input [type = 'text']"). ForceNumericOnly ()
Oliver Pearmain
1
@powtac das eachvon return this.each(function()ist, mehrere Objekte zuzulassen, wie HaggleLad sagte, und der returnTeil besteht darin, das jQuery-Objekt an den Aufrufer zurückzugeben, um eine Verkettung wie$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos
149

In der Reihe:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Unauffälliger Stil (mit jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">

Patrick Fisher
quelle
2
Dadurch wird das Caret auch dann zum Ende verschoben, wenn der Benutzer die linke Pfeiltaste drückt.
Phrogz
1
@phrogz, versuche dies : onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')".
Patrick Fisher
Dies funktioniert perfekt und verhindert Shift + Number im Gegensatz zu den oben genannten.
Nick Hartley
5
@ mhenry1384 Das ist erwartetes Verhalten. Ich finde es ein nettes Feedback, aber wenn Ihnen das nicht gefällt, dann ist ein Schlüsselcode-Ansatz genau das, wonach Sie suchen.
Patrick Fisher
2
Sie können Änderungen vornehmen, /[^0-9]|^0+(?!$)/gum führende Nullserien zu verhindern.
Johny Skovdal
105

Sie können einfach einen einfachen regulären JavaScript-Ausdruck verwenden, um auf rein numerische Zeichen zu testen:

/^[0-9]+$/.test(input);

Dies gibt true zurück, wenn die Eingabe numerisch ist, oder false, wenn nicht.

oder für den Ereignisschlüsselcode einfach unten verwenden:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }
Umang
quelle
11
Siehe meine Antwort für eine Implementierung dieses Ansatzes.
Patrick Fisher
Würde es nicht weniger Prozessorzeit dauern, nach einem numerischen Tastendruck zu suchen, als nach einem regulären Ausdruck?
andrsnn
87

Sie können ein Eingabeereignis wie folgt verwenden:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Aber was ist dieses Codeprivileg?

  • Es funktioniert in mobilen Browsern (Keydown und KeyCode haben Probleme).
  • Es funktioniert auch mit von AJAX generierten Inhalten, da wir "on" verwenden.
  • Bessere Leistung als Keydown, z. B. beim Einfügen.
Hamid Afarinesh Far
quelle
6
Ich denke, dies ist eine viel robustere (und einfachere) Lösung als die akzeptierte Antwort.
Jeremy Harris
Noch einfacher bei Verwendung von replace (/ \ D / g, '')
Alfergon
hallo, wie kann ich mit einem numerischen Wert sicherzustellen , decimalzwischen 0.0bis 24.0ich bin nicht in der Lage den geben zu lassen.
Transformator
Ich würde vorschlagen, mitthis.value = Number(this.value.replace(/\D/g, ''));
HasanG
Gute Antwort, ermöglicht das einfache Umschalten, ob eine Eingabe numerisch ist oder nicht, indem die Klasse
umgeschaltet wird
55

Kurz und bündig - auch wenn dies nach mehr als 30 Antworten nie viel Aufmerksamkeit findet;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });
Rid Iculous
quelle
5
Ich würde die Eingabe durch Eingabe ersetzen, andernfalls können Sie einen Buchstaben gedrückt halten und dann klicken, um den Fokus aus dem Textfeld zu entfernen, und der Text bleibt unverändert. Eingabe versichern, dass dies nicht passieren kann
WizLiz
Vielen Dank für den regulären Ausdruck - aber dies ist ein etwas besserer Ereignishandler: $ ('# number_only'). On ('input propertychange', function () {this.value = this.value.replace (/ [^ 0-9] / g, '');});
BradM
3
Zu Ihrer Information - Die Frage hat nicht danach gefragt, aber dies erlaubt keine Dezimalstellen (z. B. 12,75). Das Binden von "Eingabe" anstelle von "Keyup" sorgt für eine flüssigere Benutzeroberfläche, anstatt den Charakter für den Bruchteil einer Sekunde zu sehen und ihn dann entfernen zu lassen.
Paul
44

Verwenden Sie die JavaScript-Funktion isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). val ()))

if (isNaN(document.getElementById('inputid').value))

Update: Und hier ein schöner Artikel, der darüber spricht, aber jQuery verwendet: Eingabe in HTML-Textfeldern auf numerische Werte beschränken

Amr Elgarhy
quelle
40
Nun ... "JQuery wird nicht verwendet", mit Ausnahme des Teils Ihres Beispiels, der JQuery verwendet ...
GalacticCowboy
document.getElementById('inputid').val()Alter .. das ist immer noch jquery. .val()ist eine Frage. use.value
mpen
hallo, wie kann ich mit einem numerischen Wert sicherzustellen , decimalzwischen 0.0bis 24.0ich bin nicht in der Lage den geben zu lassen.
Transformator
28
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Quelle: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Ivar
quelle
6
Wow, leere "Wenn" -Blöcke und magische Zahlen! Ich habe mich nur ein wenig in meinen Mund übergeben. : D Aber im Ernst, warum sollten Sie sich all diese Mühe machen, wenn Sie die Eingabe einfach mit dem regulären Ausdruck /^[.\d‹+$/ vergleichen könnten? Und was bedeutet die '8'?
Alan Moore
@ Alan: Haha, ich habe keine Ahnung - ich habe direkt von der Quelle kopiert. Ich würde stattdessen "if (event.keyCode! = 46 && event.keyCode! = 8)" schreiben oder Regex verwenden, wie Sie sagten. Ich nehme an, die 8 repräsentiert den Löschschlüssel.
Ivar
4
Versuchen Sie zum Beispiel, Umschalt + 8 zu drücken - Ihre Validierung lässt * einsteigen
Anton
Das ist schön. Wäre viel besser, wenn es die Umschalttaste + Zahlen handhabt (Sonderzeichen wie! @ # $% ^ ..)
Shyju
27

Ich benutze dies in unserer internen gemeinsamen js-Datei. Ich füge die Klasse einfach zu jeder Eingabe hinzu, die dieses Verhalten benötigt.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
Mijk
quelle
1
Schöner, eleganter und nützlicher Code! Vielen Dank. Sie müssen jedoch Keyup- und Keydown-Ereignisse hinzufügen.
Silvio Delgado
25

Einfacher ist für mich

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
Summved Jain
quelle
7
Sie müssen nur sicherstellen, dass Sie die this.value.replace(/[^0-9\.]/g,'');OP-Anforderungen von 0-9
Chalise
24

Warum so kompliziert? Sie benötigen jQuery nicht einmal, da es ein HTML5-Musterattribut gibt:

<input type="text" pattern="[0-9]*">

Das Coole ist, dass auf Mobilgeräten eine numerische Tastatur angezeigt wird, was weitaus besser ist als die Verwendung von jQuery.

Gast
quelle
2
Dies sollte viel mehr Stimmen haben. Wenn überhaupt, können Sie auch einen regulären Regex für Nicht-HTML5-Browser hinzufügen. Die Validierung von Daten sollte jedoch auf jeden Fall serverseitig erfolgen.
Markus
Es sieht so aus, als ob es von den meisten Browsern gut unterstützt wird, daher ist die Unterstützung von Modernizr nicht so wichtig: caniuse.com/#search=pattern Safari funktioniert sehr gut, obwohl es auf dieser Site als teilweise unterstützt aufgeführt ist. Versuch es!
Gast
@guest Vielen Dank dafür. Schnellste und einfachste Antwort! Top Antwort meiner Meinung nach.
BinaryJoe01
19

Mit dieser sehr einfachen Lösung können Sie dasselbe tun

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Ich habe auf diesen Link für die Lösung verwiesen . Es funktioniert perfekt !!!

Ganesh Babu
quelle
Vielleicht ist das besser /\d|\./ zuzulassen. Dezimalzahlen
Zango
Dies funktioniert perfekt in Crome. Aber nicht in Mozilla FireFox
Kirataka
hallo, wie kann ich mit einem numerischen Wert sicherzustellen , decimalzwischen 0.0bis 24.0ich bin nicht in der Lage den geben zu lassen.
Transformator
funktioniert nicht mit Copy Paste
mrid
14

Sie können die Eingabe der HTML5- Nummer versuchen :

<input type="number" value="0" min="0"> 

Für nicht kompatible Browser gibt es Modernizr- und Webforms2- Fallbacks.

Vitalii Fedorenko
quelle
Dies erlaubt immer noch Kommas
apfz
14

Das Musterattribut in HTML5 gibt einen regulären Ausdruck an, gegen den der Wert des Elements geprüft wird.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

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.

Vickisys
quelle
hallo, wie kann ich mit einem numerischen Wert sicherzustellen , decimalzwischen 0.0bis 24.0ich bin nicht in der Lage den geben zu lassen.
Transformator
1
@transformer versuchen Sie dies <input type = "number" pattern = "[0-9] + ([\.,] [0-9] +)?" step = "0.01">
vickisys
11

Etwas ziemlich Einfaches mit jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
Adrian
quelle
8

Funktion unterdrückenNonNumericInput (Ereignis) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}
user261922
quelle
hallo, wie kann ich mit einem numerischen Wert sicherzustellen , decimalzwischen 0.0bis 24.0ich bin nicht in der Lage den geben zu lassen.
Transformator
8

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 :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
Vincent
quelle
Hey, ich benutze dies, aber was ich wirklich suche, ist ihm zu erlauben, wie 1.2 oder 3.455 so zu
punktieren
8

Sie können diese JavaScript-Funktion verwenden:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Und Sie können es wie folgt an Ihr Textfeld binden:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

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:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
karim79
quelle
Dies schlägt fehl, wenn jemand nicht numerischen Text in die Eingabe einfügt. Gibt es eine Idee, wie wir dies überwinden könnten? Ich kann mich nicht darum kümmern.
Kiran Ruth R
7

Ich denke, es wird allen helfen

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })
Als ob
quelle
Sie vergessen die Tastatureingabe. Dies würde if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
Folgendes
6

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.

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});
jamesbar2
quelle
6

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/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});
Dima
quelle
6

Sie möchten die Registerkarte zulassen:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});
ngwanevic
quelle
6

Hier ist eine Antwort, die die jQuery UI Widget Factory verwendet. Sie können leicht anpassen, welche Zeichen zulässig sind.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Das würde Zahlen, Zahlenzeichen und Dollarbeträge erlauben.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});
Mathew Foscarini
quelle
Gewährleistet dies $ und dann + - als erstes oder erstes / zweites Zeichen und dann nur 1 Dezimalpunkt?
Gordon
6

Das scheint unzerbrechlich.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
Jonathan
quelle
5

Stellen Sie sicher, dass auch der Ziffernblock und die Tabulatortaste funktionieren

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }
Kupfermühle
quelle
5

Ich wollte ein wenig helfen und habe meine Version gemacht, die onlyNumbersFunktion ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Fügen Sie einfach das Eingabe-Tag "... input ... id =" price "onkeydown =" return onlyNumbers (event) "..." hinzu und Sie sind fertig;)

Absturz
quelle
5

Ich würde auch gerne antworten :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Das war's ... nur Zahlen. :) Fast kann es nur mit der "Unschärfe" funktionieren, aber ...

Pedro Soares
quelle
5

Ein einfacher Weg, um zu überprüfen, ob der eingegebene Wert numerisch ist, ist:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }
Pragnesh Rupapara
quelle
5

Sie müssen diese Methode nur in Jquery anwenden, und Sie können Ihr Textfeld so validieren, dass nur Zahlen akzeptiert werden.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Versuchen Sie diese Lösung hier

Jitender Kumar
quelle
5

Sie können die Eingabe der HTML5-Nummer versuchen:

<input type="number" placeholder="enter the number" min="0" max="9">

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

kkk
quelle