CODEWITHSUNDEEP
javascriptjquery
joerdie
joerdie

Reputation: 379

Limiting number of integers before decimal point using .numeric

I am trying to limit input to a maximum of two integers before the decimal and a maximum of one after. (00.0 for example) I have been trying to make this work with the .numeric which can be found here.

My call looks like this. 

$(".setOneNumDec").numeric({
    negative: false,
    decimal: ".",
    scale: 3,
    decimalPlaces: 1
});

Currently the limit of one decimal place is working however the plugin is still allowing any number of integers before the decimal.

Upvotes: 0

Views: 73

Answers (1)

caramba
caramba

Reputation: 22480

The plugin you are using is let's say out of date. It's 2 years old (or didn't get any changes since) and these days any modern browser (even IE > 10) can handle the number type on input elements. So why use a plugin you don't need.

var element = document.querySelector('input[type="number"]');
element.addEventListener("keyup", function(event){

    var currentChar = parseInt(String.fromCharCode(event.keyCode), 10);
    // the String.fromCharCode... is a special trick 
    // which is nicely explained here: 
    // http://stackoverflow.com/a/25060122/2008111

    if(!isNaN(currentChar)) {
        var nextValue = this.value + currentChar;
        
        // check if next value is bigger then 100 the reset to 99.9
        if(parseInt(nextValue, 10) > 100) {
            return this.value = 99.9;
        }
        
        // decimal check here. if more then 2 decimal places remove the last one
        if((this.value.split('.')[1] || []).length > 1) {
          return this.value = this.value.slice(0, -1);
        }
    }
    return false;
});
<input type="number" min="0.1" max="99.9" step="0.1" />

Also when testing: Look how nice it's working even when using the arrows inside the input field.

Upvotes: 2

Related Questions