Force input number decimal places natively

Question

I'd like to force an <input type="number" step="0.01" /> to always have 2 decimals to enter accounting data.

I've managed to do that using JavaScript

document.getElementById('input').addEventListener('change', force2decimals);

function force2decimals(event) {
 event.target.value = Number(Math.round(event.target.value * 100) / 100).toFixed(2);
}

<input type="number" step="0.01" id="input" value="1.00" />

Is there any way to handle this natively?

I know about the step attribute, the "duplicate answer" doesn't reply to my question.

Take a look at the `pattern` attribute, such as `pattern="\d+\.\d\d"`. — , Aug 17 '16 at 03:18
Unfortunately, the `pattern` attribute doesn't work with `number`-typed inputs — Yann Bertrand, Aug 18 '16 at 09:47

score 1 · Accepted Answer · edited Aug 18 '16 at 13:08

1

It could be done by this:

document.getElementById('input').addEventListener('change', force2decimals);

function force2decimals(event) {
 event.target.value = parseFloat(event.target.value).toFixed(2);
}

<input type="number" step="0.01" id="input" value="1.00" />

There is no way to do this "natively" in HTML5.

edited Aug 18 '16 at 13:08

Yann Bertrand

2,983
1
19
37

answered Aug 16 '16 at 18:46

Mojtaba

4,326
4
17
37

no need to check value length , it will automatically format val = parseFloat(event.target.value).toFixed(2); – Shafiqul Islam Aug 16 '16 at 20:18
@ShafiqulIslam, Yes. my first answer was with a line. But, when we have a number like 1.10, it converts it to 1.1 . So, I wrote the extra codes to always keep it in 2 decimals – Mojtaba Aug 16 '16 at 20:25
@ShafiqulIslam, I reverted the answer and it's working fine :) – Mojtaba Aug 16 '16 at 20:29
Isn't there an HTML way of doing it? – Yann Bertrand Aug 18 '16 at 09:40
@YannBertrand, no. HTML acts as a mathematical view. You want to act as an accountant. So, you have to do it manually. That's the way I recommend – Mojtaba Aug 18 '16 at 13:02
I hope it will come in the future then! Thanks for you answer :) – Yann Bertrand Aug 18 '16 at 13:04
@YannBertrand, no problem. I wish so – Mojtaba Aug 18 '16 at 13:05

score 0 · Answer 2 · edited Apr 27 '18 at 07:47

0

You can use this:

function force2decimals(event) {
  var value = $(event).val();
  var format_val = parseFloat(value).toFixed(2);
  $(event).val(format_val);
}

<input type="number" step="0.01" id="input" onchange="force2decimals(this)" value="1.00" />

I hope this was helpful.

edited Apr 27 '18 at 07:47

Altay Akkus

248
1
10

answered Aug 16 '16 at 20:12

Shafiqul Islam

5,065
1
26
39

there is no jQuery tag for the question. That means he wants it by JavaScript. Not jQuery – Mojtaba Aug 16 '16 at 20:26
In this question, there is no restriction to use jQuery so why we do not use jQuery if it will easy and in this question there is no jQuery tag that ok but if question provider miss tag then we can not answer using related something? – Shafiqul Islam Aug 16 '16 at 20:59
@ShafiqulIslam Yes, that is the current protocol. If a user has not applied the jQuery tag, and you want to provide a jQuery solution, first ask in a comment if the OP is amenable to using jQuery. – Aug 17 '16 at 03:20
@torazaburo ok i will do it . – Shafiqul Islam Aug 17 '16 at 06:21
@ShafiqulIslam, sometimes jQuery makes it easy. But, many developers prefer to use the native JS syntaxes and do not use jQuery. It depends on your project, expectations and limitations. So, when someone is using native JavaScript for his/her project, we should try to solve his/her problem on the way is under used. – Mojtaba Aug 17 '16 at 14:04
Yup, I didn't specify it in the question but I'm not looking for a jQuery solution. Thanks anyway! – Yann Bertrand Aug 18 '16 at 09:42

Force input number decimal places natively

2 Answers2

Linked