it-swarm.com.de

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

Was ist der beste Weg, um die "Anzahl" nur für Textfelder einzuschränken?

Ich suche etwas, das Nachkommastellen erlaubt.

Ich sehe viele Beispiele. Muss sich aber noch entscheiden, welche verwendet werden soll.

Update von Praveen Jeganathan

Keine weiteren Plugins mehr, jQuery hat seine eigene jQuery.isNumeric() in v1.7 ..__ hinzugefügt. Siehe: https://stackoverflow.com/a/20186188/66767

224
wenbert

Aktualisieren

Dafür gibt es eine neue und sehr einfache Lösung:

Damit können Sie den Eingabefilter any für einen Text <input>, .__ verwenden. einschließlich verschiedener numerischer Filter. Dies wird korrekt mit Kopieren + Einfügen, Ziehen + Ablegen, Tastenkombinationen, Kontextmenüvorgänge, Tasten, die nicht eingegeben werden können, und alle Tastaturlayouts.

Siehe diese Antwort oder probieren Sie es selbst bei JSFiddle .

jquery.numeric plugin

Ich habe viele Formulare erfolgreich mit dem jquery.numeric Plugin implementiert.

$(document).ready(function(){
    $(".numeric").numeric();
});

Außerdem funktioniert das auch bei Textareas!

Beachten Sie jedoch, dass Strg + A, Kopieren + Einfügen (über das Kontextmenü) und Drag + Drop nicht wie erwartet funktionieren.

HTML 5

Mit einer breiteren Unterstützung für den HTML 5-Standard können wir pattern-Attribut und number-Typ für input-Elemente verwenden, um nur die Eingabe von Zahlen zu beschränken. In einigen Browsern (insbesondere Google Chrome) wird das Einfügen von nicht numerischem Inhalt ebenfalls eingeschränkt. Weitere Informationen zu number und anderen neueren Eingabetypen finden Sie hier .

192
TheVillageIdiot

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.

282
Keith Bentrup

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.

100
James Nelli

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();
  }
});
54

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);
   }
});
47
Praveen

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.

34
Mike Gibbs

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

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

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 />

17
vinayakj

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)">
14
kaleazy

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]
    }
  }
});
11
Brad Parks

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, ''));
});
9
Null Head

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.

8
Håvard Geithus
   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();
6
David Freire

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();
  }
});
6
lekshmi

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/

5
Mladen Adamovic

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.
4
mordy

/*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();
            }
        }

  });
4
roger

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]*$/);
3
David Sherret

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!
3

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.

2

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.

2
Jay Blanchard

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.

2
jrharshath

Ü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)'
2
Alex Homm

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

2
Mithil

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

2

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

2
Carlos Toledo

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; 
  }
});
1
Jyothu
    $(".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;)

1
Reedyseth

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;
            }
        });
    }); 
1
kamal.shalabe

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.

1
tksilicon

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.

1
Tabbernaut

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.

1
David

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();
    });
  1. Direkte Methode
$(".numbersOnly").keypress(function (e) {
        if (e.which < 48 || 57 < e.which)
            e.preventDefault();
    });
1
samurai

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/ .

1

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
1
Kaustubh

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

0
jBelanger

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();
    }
});
0
Agnibha

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;
        }
    }
0
Praveen04