jQuery: Was ist der beste Weg, um die Eingabe von "Zahlen" nur für Textfelder einzuschränken? (Dezimalpunkte zulassen)

Wenn Sie die Eingabe einschränken möchten (im Gegensatz zur Überprüfung), können Sie mit den Schlüsselereignissen arbeiten. etwas wie das:

<input type="text" class="numbersOnly" value="" />

Und:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

Dadurch wird dem Benutzer sofort mitgeteilt, dass er keine Buchstaben, etc. eingeben kann, und nicht später in der Validierungsphase. 

Sie möchten dennoch validieren, da die Eingabe möglicherweise durch Ausschneiden und Einfügen mit der Maus oder möglicherweise durch einen Formularautovervielfacher ausgefüllt wird, der die Schlüsselereignisse möglicherweise nicht auslöst.

Ich dachte, dass die beste Antwort diejenige war, die dies getan hat.

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

aber ich stimme zu, dass es ein bisschen schmerzhaft ist, dass die Pfeiltasten und der Lösch-Button den Cursor an das Ende der Zeichenkette fangen (und deswegen wurde es mir beim Testen zurückgeschickt)

Ich fügte eine einfache Änderung hinzu

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

auf diese Weise ignorieren Sie einfach den Text, wenn ein Tastendruck getroffen wird, der nicht dazu führt, dass der Text geändert wird. Mit dieser Funktion können Sie Pfeile und Löschvorgänge ausführen, ohne an das Ende zu springen, wobei jedoch nicht numerischer Text gelöscht wird.

Das Plugin jquery.numeric enthält einige Fehler, die ich dem Autor mitgeteilt habe. In Safari und Opera sind mehrere Dezimalstellen zulässig. In Opera können Sie keine Rücktaste, Pfeiltasten oder mehrere andere Steuerzeichen eingeben. Ich brauchte eine positive Ganzzahl-Eingabe, so dass ich am Ende einfach meine eigene schrieb.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Keine weiteren Plugins, jQuery hat seine eigene jQuery.isNumeric () implementiert, die in v1.7 hinzugefügt wurde. 

jQuery.isNumeric( value ) 

Bestimmt, ob das Argument eine Zahl ist.

Probenergebnisse

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

Hier ein Beispiel, wie Sie isNumeric () in den Ereignis-Listener einbinden

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

Das numerische () -Plugin, das oben erwähnt wurde, funktioniert nicht in Opera (Sie können nicht zurückspulen, löschen oder sogar die Vor- oder Zurück-Tasten verwenden).

Der folgende Code in JQuery oder Javascript funktioniert einwandfrei (und besteht nur aus zwei Zeilen).

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

Javascript:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

Natürlich ist dies nur für die rein numerische Eingabe (plus Rücktaste, Löschen, Vorwärts/Zurück-Tasten), kann aber leicht geändert werden, um Punkte und Minuszeichen zu enthalten.

Sie können das Plugin Validation mit seiner number () - Methode verwenden. 

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Der lange Code zur Einschränkung der Zahleneingabe ist nicht erforderlich.

Es akzeptiert auch gültige int & float-Werte.

Javascript-Ansatz

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery-Ansatz

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

UPDATE

Die obigen Antworten beziehen sich auf die am häufigsten verwendeten Fälle - die Überprüfung der Eingabe als Zahl.

Nachfolgend finden Sie jedoch das Code-Snippet für spezielle Anwendungsfälle

• Negative Zahlen zulassen
• Zeigt den ungültigen Tastenanschlag an, bevor Sie ihn entfernen.

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Im Folgenden wird beschrieben, wie ich die Tastenanschläge buchstäblich blockiere. Dies erlaubt nur die Zahlen 0-9 und einen Dezimalpunkt. Einfach zu implementieren, nicht viel Code und wirkt wie ein Zauber:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Als geringfügige Verbesserung zu diesem Vorschlag können Sie das Validation Plugin mit seiner Nummer () , Ziffern und Bereich verwenden. Beispielsweise stellt Folgendes sicher, dass Sie eine positive ganze Zahl zwischen 0 und 50 erhalten:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Sie sehen kein magisches Aussehen von Alphabeten und das Verschwinden von Tasten nach unten. Dies funktioniert auch bei Mauspaste. 

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Ich habe zuerst versucht, das Problem mit jQuery zu lösen, aber ich war nicht glücklich darüber, dass unerwünschte Zeichen (nicht Ziffern) im Eingabefeld erscheinen, kurz bevor sie beim Keyup entfernt werden. 

Auf der Suche nach anderen Lösungen habe ich Folgendes gefunden:

Ganzzahlen (nicht negativ)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example Live-Beispiel: http://jsfiddle.net/u8sZq/

Dezimalpunkte (nicht negativ)

Um einen einzelnen Dezimalpunkt zuzulassen, können Sie Folgendes tun:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

Quelle: Einfach das geschrieben. Scheint zu funktionieren . Live-Beispiel: http://jsfiddle.net/tjBsF/

Andere Anpassungen

• Um weitere Symbole einzugeben, fügen Sie diese einfach dem regulären Ausdruck hinzu, der als grundlegender Zeichencodefilter fungiert. 
• Um einfache kontextabhängige Einschränkungen zu implementieren, betrachten Sie den aktuellen Inhalt (Status) des Eingabefelds (oToCheckField.value).

Einige Dinge, an denen Sie interessiert sein könnten:

• Es ist nur ein Dezimalpunkt zulässig
• Minuszeichen nur zulassen, wenn sie am Anfang der Zeichenfolge stehen. Dies würde negative Zahlen zulassen.

Mängel

• Die Caret-Position ist innerhalb der Funktion nicht verfügbar. Dadurch wurden die kontextuellen Einschränkungen, die Sie implementieren können, erheblich reduziert (z. B. keine zwei gleichen aufeinanderfolgenden Symbole). Sie sind sich nicht sicher, wie Sie am besten darauf zugreifen können. 

Ich weiß, dass der Titel nach jQuery-Lösungen fragt, aber hoffentlich findet jemand das trotzdem nützlich.

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

Und wenden Sie dies auf alle gewünschten Eingänge an:

$('selector').ForceNumericOnly();

Vielen Dank für den Beitrag Dave Aaron Smith

Ich habe Ihre Antwort bearbeitet, um Dezimalzeichen und Zahlen aus dem Nummernbereich zu akzeptieren. Diese Arbeit ist perfekt für mich.

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

HTML5 unterstützt die Eingabetypnummer mit globaler Browserunterstützung von 88% + gemäß CanIUse ab Oktober 2015. 

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

Dies ist keine JQuery-bezogene Lösung, aber der Vorteil ist, dass die Android-Tastatur auf Mobiltelefonen für die Eingabe von Zahlen optimiert wird.

Alternativ ist es möglich, den Eingabetyp Text mit dem neuen Parameter "Muster" zu verwenden. Weitere Details in HTML5-Spezifikation. 

Ich denke, es ist eine bessere Lösung als eine Jquery-Lösung, da die in dieser Frage bereitgestellte Jquery-Lösung keine Tausendertrennzeichen unterstützt. Wenn Sie HTML5 verwenden können.

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Diese Funktion macht dasselbe und verwendet einige der oben genannten Ideen.

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• visuelles Feedback anzeigen (falscher Buchstabe erscheint vor dem Verschwinden)
• erlaubt Dezimalzahlen
• fängt mehrere "."
• hat keine Probleme mit links/rechts del etc.

/*this ist meine Cross-Browser-Version von Wie erlaube ich nur numerische Werte (0-9) in HTML-Eingabefeld mit jQuery?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Ich denke, das ist ein guter Weg, um dieses Problem zu lösen und es ist extrem einfach:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

Beispiel:JSFiddle

Szenarios abgedeckt

Die meisten ähnlichen Empfehlungen schlagen bei mindestens einem dieser Punkte fehl oder erfordern viel Code, um alle diese Szenarien abzudecken.

1. Erlaubt nur 1 Dezimalpunkt.
2. Erlaubt die Variablen home, end und arrow.
3. Erlaubt die Verwendung von delete und backspace in einem beliebigen Index.
4. Erlaubt die Bearbeitung an einem beliebigen Index (solange die Eingabe mit dem regulären Ausdruck übereinstimmt).
5. Erlaubt Strg + V und Umschalt + Einfügen für gültige Eingaben (mit Rechtsklick + Einfügen).
6. Flackert den Textwert nicht, da das Ereignis keyup nicht verwendet wird.
7. Stellt die Auswahl nach ungültiger Eingabe wieder her.

Szenarien fehlgeschlagen

• Mit 0.5 zu beginnen und nur die Null zu löschen, funktioniert nicht. Dies kann behoben werden, indem der Regex in /^[0-9]*\.?[0-9]*$/ geändert wird und dann ein Unschärfereignis hinzugefügt wird, um einen 0 vorauszusetzen, wenn das Textfeld mit einem Dezimalpunkt beginnt (falls gewünscht). Sehen Sie sich dieses erweitertes Szenario an, um eine bessere Vorstellung davon zu erhalten, wie Sie dies beheben können.

Plugin

Ich habe dieses einfache jquery plugin erstellt, um das einfacher zu machen:

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

Sie können autoNumeric von decorplanit.com verwenden. Sie haben eine nette Unterstützung für Zahlen, Währung, Rundung usw.

Ich habe in einer IE6-Umgebung mit wenigen CSS-Anpassungen verwendet, und es war ein vernünftiger Erfolg.

Beispielsweise könnte eine css-Klasse numericInput definiert werden, mit der die Felder mit den numerischen Eingabemasken dekoriert werden können.

angepasst von der autoNumeric-Website:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Dies ist ein Ausschnitt, den ich gerade gemacht habe (unter Verwendung eines Teils des Codes von Peter Mortensen/Keith Bentrup) für eine Ganzzahlprozentprüfung in einem Textfeld (jQuery erforderlich):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

Dieser Code:

• Ermöglicht die Verwendung der numerischen Haupttasten und der numerischen Tastatur.
• Wird zum Ausschluss von Shift-numerischen Zeichen (z. B. #, $,% usw.) verwendet.
• Ersetzt NaN-Werte durch 0
• Ersetzt durch 100 höhere Werte als 100

Ich hoffe, das hilft den Bedürftigen.

Wenn Sie HTML5 verwenden, müssen Sie sich nicht um die Validierung kümmern. Benutz einfach - 

<input type="number" step="any" />

Das Schrittattribut ermöglicht, dass der Dezimalpunkt gültig ist.

Der beste Weg ist, die Kontakte des Textfelds zu überprüfen, 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 Validation-Plugin verwenden, das dies grundsätzlich automatisch tut.

Überprüfen Sie diesen Suchcode für die Datenbanknutzung:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Eine großartige Lösung hier gefunden http://ajax911.com/numbers-numeric-field-jquery/

Ich habe gerade den "Keyup" entsprechend meiner Anforderung in "Keydown" geändert

Führen Sie den Inhalt einfach über parseFloat () aus. Bei ungültiger Eingabe wird NaN zurückgegeben.

Andere Möglichkeit, die Einfügemarke auf dem Eingang zu halten:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

Vorteile:

1. Der Benutzer kann die Pfeiltasten verwenden, Rücktaste, Löschen, ... 
2. Funktioniert, wenn Sie Zahlen einfügen möchten

Plunker: Demo funktioniert

Dies ist sehr einfach, da wir bereits eine Javascript eingebaute Funktion "isNaN" haben.

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Dieser Code hat bei mir ziemlich gut funktioniert, ich musste nur die 46 im controlKeys-Array hinzufügen, um die Periode zu verwenden, obwohl ich nicht denke, dass dies der beste Weg ist, dies zu tun;)

ich benutze diese Funktion und es funktioniert gut 

$(document).ready(function () {
        $("#txt_Price").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            //if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) 
            if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
                //display error message
                $("#errmsg").html("Digits Only").show().fadeOut("slow");
                return false;
            }
        });
    }); 

Ich verwendete die Antwort von James Nelli und fügte hinzu: onpaste = "return false;" (Håvard Geithus), um sicherzustellen, dass nur ganze Zahlen in die Eingabe eingegeben werden. Selbst wenn Sie versucht haben, einzufügen, lässt es das nicht zu.

Das jquery.numeric plugin funktioniert auch gut für mich.

Das einzige, was ich nicht mag, hat mit Intuition zu tun. Tastendrücke werden ohne Rückmeldung an den Benutzer "verboten", der paranoid wird oder sich fragt, ob seine Tastatur beschädigt ist.

Ich fügte einen zweiten Callback zum Plugin hinzu , um eine einfache Rückmeldung auf blockierte Eingaben zu ermöglichen:

$('#someInput').numeric(
    null, // default config
    null, // no validation onblur callback
    function(){
        // for every blocked keypress:
        $(this).effect("pulsate", { times:2 }, 100);
    }
);

Nur ein Beispiel (mit der jQuery-Benutzeroberfläche) natürlich. Ein einfaches visuelles Feedback würde helfen.

Es gibt ein Nice-Jquery-Plugin namens Jquery Mask Plugin , das Masken für Formularfelder und HTML-Elemente erstellt. Sie können es aber auch verwenden, um einfach zu definieren, welche Art von Daten in ein Feld eingegeben werden können: 

$('.numeric-input').mask('0#');

Jetzt sind nur Zahlen in Ihrem Formularfeld zulässig.

Keypress Event verwenden

1. Array-Methode

var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
        if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
            e.preventDefault();
    });

2. Direkte Methode

$(".numbersOnly").keypress(function (e) {
        if (e.which < 48 || 57 < e.which)
            e.preventDefault();
    });

Ich habe gerade ein noch besseres Plug-in gefunden. Gibt Ihnen viel mehr Kontrolle. Sie haben ein DOB Feld, in dem Sie es numerisch benötigen, aber auch "/" oder "-" akzeptieren. Zeichen.

Es funktioniert super!

Überprüfen Sie es unter http://itgroup.com.ph/alphanumeric/ .

Ich habe das mit guten Ergebnissen verwendet ..

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Sie können die HTML5-Validierung für Ihre Texteingaben verwenden, indem Sie ein Muster hinzufügen. Keine manuelle Überprüfung mit Regex oder KeyCodes erforderlich.

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

Eine Lösung mit Eingabe [Typ = Nummer] finden Sie in meiner vollständigen Antwort hier

ERLAUBT NEGATIVE NUMMERN AUCH

Der folgende Code akzeptiert auch negative Zahlen

HTML

<input type="text" name="myText" />

JS

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {

    if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
}).on('blur', function(){
        if(this.value == '-')
            this.value = '';
});

Ich habe diesen Code, der die Arbeit für mich sehr gut macht.

 var prevVal = '';
$(".numericValue").on("input", function (evt) {
    var self = $(this);
    if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
        prevVal = self.val()
    } else {
        self.val(prevVal);
    }
    if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
        evt.preventDefault();
    }
});

Dieser Code dient dazu, Alphabete in Textfeldern einzuschränken. Bei Tastendruckereignissen muss nur die alte Nummer eingegeben werden

HTML-Tags:

<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />

nur FunktionNummern (Schlüssel) {

        var keycode = (key.which) ? key.which : key.keyCode

        if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {

            return true;
        }
        else {
            return false;
        }
    }