CODEWITHSUNDEEP
javascriptdecimal-point
cloudseeker
cloudseeker

Reputation: 275

Javascript restrict input once 2 decimal places have been reached

I currently have a number input script that behaves similar to a calculator with the way numbers are displayed, but I want to stop the adding of additional numbers to the series after two numbers past the decimal point.

Here is what I have so far, though the limiting doesn't occur correctly.

It should work like this:

1.25 - Allowed

12.5 - Allowed

125.5 - Allowed

125.55 - Allowed

123.555 - Not Allowed

rText = document.getElementById("resultText");

function selectNumber(num) {
if (!rText.value || rText.value == "0") {
    rText.value = num;
}
else {

this part works...

        rText.value += num;

    }
  }
}

but this part doesn't work... Any ideas???

if (rText.value.length - (rText.value.indexOf(".") + 1) > 2) {

        return false;
    } else {
        rText.value += num;

    }
  }
}

Upvotes: 17

Views: 39331

Answers (5)

user2652134
user2652134

Reputation: 

var validate = function(e) {
  var t = e.value;
  e.value = t.indexOf(".") >= 0 ? t.slice(0, t.indexOf(".") + 3) : t;
}
<input type="text" inputmode="numeric" pattern="[0-9+-.]+" id="resultText" oninput="validate(this)" />

Upvotes: 42

Sandeep Jain
Sandeep Jain

Reputation: 1262

Java script way  :

    (isNaN(value)) <-- First to check the input value is number

    
    After verifying the value input is numeric, check the value should have only two decimal values after this, also allow single value to pass

    function checkDecimal(value)   
    {  
        var split = value.split('.');
        console.log(split);
        if (split.length === 2 && split[1].length > 2) {
            console.log(split[1].length);
            return false;
        }
        return true;
    }

Upvotes: 0

user6782881
user6782881

Reputation:

Just copy paste this method and call this method on your respective button on which button you have to check this decimal validation. 

function CheckDecimal(inputtxt)   
  {   
  var decimal=  /^[-+]?[0-9]+\.[0-9]+$/;   
  if(inputtxt.value.match(decimal))   
    {   
    alert('Correct, try another...')  
    return true;  
    }  
  else  
    {   
    alert('Wrong...!')  
    return false;  
    }  
  }

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7015

Save the previous value in some data attribute and if it exceeds 2 decimal places then restore the previous value

The 2 decimal places can be checked using Math.round(tis.value*100)/100!=tis.value

Note:

I have used oninputto validate even in copy paste scenarios

function restrict(tis) {
  var prev = tis.getAttribute("data-prev");
  prev = (prev != '') ? prev : '';
  if (Math.round(tis.value*100)/100!=tis.value)
  tis.value=prev;
  tis.setAttribute("data-prev",tis.value)
}
<input type="number" id="rText" oninput="restrict(this);" />

Upvotes: 4

marquesm91
marquesm91

Reputation: 555

I love to use Math.floor and toFixed() to resolve my decimal issues.

Here is a example:

var value = 123.5555
var roundedNumber = (Math.floor(value * 100) / 100).toFixed(2)

roundedNumber will be "123.55" as a string. So if you want as a number just add:

var value = 123.5555
var roundedNumber = Number((Math.floor(value * 100) / 100).toFixed(2))

and now you have value as a number and fixed to up 2 decimal places.

Upvotes: 0

Related Questions