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?

^{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 .

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

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

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

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.

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

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

$(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

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

Einfacher ist für mich

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

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.

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

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.

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.

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)');

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

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

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()"/>

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

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

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

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

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

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

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

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

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

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

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

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