JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

Only numbers please: 
<input class="NC" type="number" name="someid" onkeypress="return isNumberKey(event, $(this).val(), 0, 100)" onkeydown="return isLimited(event, $(this).val(), 0 ,100)"
/> 

<script>
    
    $('.NC').bind("cut copy paste",function(e) {
          e.preventDefault();
      });
    
    
function isLimited(event, val, min, max){
    alert('val::::' + val)
    if (val.trim() != "")
    {
    if (event.keyCode == 37)
    {
    alert('37');
    }
    else if (event.keyCode == 38)
    {
    //alert('38');
        if (val+1 > max)
             return false;   
    }
    
    else if (event.keyCode == 39)
    {
    alert('39');
     }   
    else if (event.keyCode == 40)
    {
    //alert('40');
        if (val-1 < min)
             return false;

    }
    }
    /*
    if (val < min)
         return min;
     else if (val+1 > max)
         return false;   
    */
    return true;
}
    
    
function isNumberKey(evt, val, min, max){
    //if (evt.ctrlKey==true && (evt.which == '118' || evt.which == '86'))
    //  return false;
    
    var charCode = (evt.which) ? evt.which : event.keyCode
    
    
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    var final = val + String.fromCharCode(charCode);
    
    //alert(final);
    
    if (final < min || final > max)
     return false;
    
    return true;
}    
    
    
    /*
    $('.NC').on('change', function(){
    if ($(this).val() > 100)
    {
    //alert('100');
    $(this).val(100);
    }
    });
    */
</script>