Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;

    }
  }
}
like image 344
cloudseeker Avatar asked Sep 20 '17 12:09

cloudseeker


2 Answers

var validate = function(e) {
  var t = e.value;
  e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t;
}
<input type="text" id="resultText" oninput="validate(this)" />
like image 93
Brahma Dev Avatar answered Sep 22 '22 15:09

Brahma Dev


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);" />
like image 41
jafarbtech Avatar answered Sep 21 '22 15:09

jafarbtech