Limit number of digits after decimals in text input

Question

There is a similar question which limits the number of characters for allowed in a form input.

In my case I want to limit the number of digits that can be added after the decimal point to 2 digits.

<input type="text" maxlength="2"/>

Is there a way to limit the digits after a decimal point (.) ?

Leo, I saw your edit suggestion. With my method you can type `text 2.00 text 3.00` if you want to ; with your edit we won't be able to add anything after the first number: `text 2.00`. As your question didn't explicitly mention that the decimals must be at the end of the `input`, I prefer to stick with my method. I think it's better for future viewers. :) — Takit Isy, Jun 06 '18 at 09:06

Takit Isy · Accepted Answer · 2018-06-06T09:08:04.970

As I am not aware of any way to do it in HTML…
Here is how I'll do it with some JavaScript, using a RegEx to delete the extra decimals:

var myInput = document.querySelector('#fixed2');
myInput.addEventListener("keyup", function(){
  myInput.value = myInput.value.replace(/(\.\d{2})\d+/g, '$1');
});

<input id="fixed2" type="text" />

Note that I used the keyup event here, so that you can see the automatic deletion. But it works great with input too!

⋅ ⋅ ⋅

We could generalize this method to work with multiple inputs, using a custom attribute like decimals:
(I'm using input event here, so you see the difference)

var myInputs = document.querySelectorAll('.fixed');
myInputs.forEach(function(elem) {
  elem.addEventListener("input", function() {
    var dec = elem.getAttribute('decimals');
    var regex = new RegExp("(\\.\\d{" + dec + "})\\d+", "g");
    elem.value = elem.value.replace(regex, '$1');
  });
});

<input class="fixed" type="text" decimals="2" placeholder="2 decimals only" />
<br><br>
<input class="fixed" type="text" decimals="3" placeholder="3 decimals only" />

Hope it helps.

score 0 · Answer 2 · answered Jun 05 '18 at 11:47

I think best option is to resovle this with jQuery validator, where you can add requirments for each field that you are using. If you are trying to resovle this with HTML5 it might happen that in some browsers it will not work in a way you want.

Check this --> https://jqueryvalidation.org/

--> https://jqueryvalidation.org/maxlength-method/

score 0 · Answer 3 · answered Jun 05 '18 at 11:48

0

If you are comfortable using scripts, then you may try the following approach:

$(document).ready(function() {
  $("input").on("blur", function() {
    $(this).val(parseFloat($(this).val()).toFixed(2));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="0.01" min="0" />

answered Jun 05 '18 at 11:48

K K

17,794
4
30
39

1

I tried using toFixed. The problem is that here you can still introduce the values. I would like some method where after introducing maxim 2 digits to not be able to introduce more. Also, I see that you have type="number". I'm using type="text" because I have a pattern which doesn't work with number. Quite complicated, I know... – Leo Messi Jun 05 '18 at 11:59
@LeoMessi The code above will auto convert the excessive values and limit it to two decimal places – K K Jun 05 '18 at 12:01

score 0 · Answer 4 · answered Feb 05 '20 at 06:17

The following solution works with number inputs and therefor defends against alphabetical characters (unlike the currently accepted answer):

function limitDecimalPlaces(e, count) {
  if (e.target.value.indexOf('.') == -1) { return; }
  if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
    e.target.value = parseFloat(e.target.value).toFixed(count);
  }
}

<input type="number" oninput="limitDecimalPlaces(event, 2)" />

Note that this cannot AFAIK, defend against this chrome bug with the number input.

Limit number of digits after decimals in text input

4 Answers4