$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>
<input type="text" class="integerInput"/>
		

Antwoord 20

input type="number"is een HTML5-attribuut.

In het andere geval zal dit u helpen:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Antwoord 21

JavaScript-code:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;
            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML-code:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

werkt perfect omdat de backspace-sleutelcode 8 is en een regex-expressie dit niet toelaat, dus het is een gemakkelijke manier om de bug te omzeilen 🙂

Antwoord 22

Gewoon een andere variant met jQuery met

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Antwoord 23

Ik heb een aantal geweldige antwoorden gezien, maar ik wil ze zo klein en eenvoudig mogelijk houden, dus misschien heeft iemand er wat aan. Ik zou javascript Number()en isNaNfunctionaliteit als volgt gebruiken:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

Hopelijk helpt dit.

Antwoord 24

Je kunt de invoerwaarde (die standaard als tekenreeks wordt behandeld) ook vergelijken met zichzelf, geforceerd als numeriek, zoals:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

Je moet dat echter binden aan gebeurtenissen zoals key-up enz.

Antwoord 25

<input name="amount" type="text" value="Only number in here"/> 
<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Antwoord 26

Gebruik deze DOM:

<input type = "text" onkeydown = "validate(event)"/>

en dit script:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

… of dit script, zonder index van, met behulp van twee for…

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

Ik heb het attribuut onkeydown gebruikt in plaats van On KeyPress, omdat het attribuut On-KEYDOWN wordt gecontroleerd voordat het attribuut van On-SkeyPress is. Het probleem zou in de Chrome-browser van Google zijn.

Met het attribuut “onkeyPress”, zou het tabblad ongecontroleerd zijn met “PreventDefault” op Google Chrome, maar met het attribuut “onkeydown”, wordt het tabblad regelbaar!

ASCII-code voor TAB = & GT; 9

Het eerste script heeft minder code dan de tweede, maar de reeks ASCII-tekens moet alle toetsen hebben.

Het tweede script is veel groter dan het eerste, maar de array heeft niet alle sleutels nodig. Het eerste cijfer in elke positie van de array is het aantal keren dat elke positie wordt gelezen. Voor elke meting wordt 1 verhoogd naar de volgende. Bijvoorbeeld:

NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

…

48 + NCount = 57

In het geval van numerieke sleutels zijn er slechts 10 (0 – 9) maar als het 1 miljoen waren, zou het geen zin hebben om een array te maken met al deze sleutels.

ASCII-codes:

• 8 ==> (Backspace);
• 46 => (Verwijderen);
• 37 => (pijl naar links);
• 39 => (pijl naar rechts);
• 48 – 57 => (cijfers);
• 36 => (thuis);
• 35 => (einde);

Antwoord 27

Dit is een verbeterde functie:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Antwoord 28

De beste manier (ALLE type getallen toestaan – echt negatief, echt positief, iinteger negatief, geheel getal positief) is:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Antwoord 29

Dit is de uitgebreide versie van geowa4’s oplossing. Ondersteunt minen maxattributen. Als het nummer buiten bereik is, wordt de vorige waarde weergegeven.

Je kunt het hier testen.

Gebruik: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}
$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }
            }       
    });     
});

Als de invoer dynamisch is, gebruik dan dit:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});