How to get full value of number input in Firefox with zeros

Question

Firefox shows just 1 when I type 1,00 in the input. All other browsers I tested are showing 1,00. How can I read the full value of the input in Firefox with the zeros after the comma? The type of the input has to be number and can't be text.

$("#input").keyup(function() {
  $("#output").text($("#input").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" min="0.00" step="0.01" max="999.99">
<p id="output"></p>

Edit: For me it doesn't matter if decimal mark is a comma or a period. See the Screenshot of the difference between Chrome and Firefox.

chrome doesnt even allow commas; are u sure u tested it in chrome? — Rajkumar Somasundaram, Nov 17 '17 at 12:32
@RajkumarSomasundaram This works fine in Chrome. However `1.00` also becomes `1` — Jerodev, Nov 17 '17 at 12:32
Yes, I tested it with Chrome. Maybe you have to use a point instead of a comma. I think it depends on your location. — Virinum, Nov 17 '17 at 12:34
Location has no bearing on it. Numbers must be delimited by a period, not a comma. — evolutionxbox, Nov 17 '17 at 12:34
Check [this page for the support](https://www.ctrl.blog/entry/html5-input-number-localization) . Also try adding `lang` attribute as `en-150` as shown in the linked page. — sabithpocker, Nov 17 '17 at 12:53
Maybe check this question https://stackoverflow.com/questions/17341325/how-to-force-to-display-a-number-with-a-comma-with-input-type-number — evolutionxbox, Nov 17 '17 at 13:12
It doesn't matter if it's a comma or a period. The problem is that in Firefox the value is different than the input. — Virinum, Nov 17 '17 at 13:17

Piterden · Answer 1 · 2017-11-17T12:40:04.047

0

let output = document.getElementById('output');

document.getElementById('input').addEventListener('input', function (e) {
  output.innerText = e.currentTarget.value.replace('.', ',');
});

<input type="number" id="input" min="0.00" step="0.01" max="999.99">
<p id="output"></p>

edited Nov 17 '17 at 12:40

answered Nov 17 '17 at 12:35

Piterden

771
5
17

Still doesn't allow commas. – evolutionxbox Nov 17 '17 at 12:36
Hmm... Wait a munute – Piterden Nov 17 '17 at 12:37
This is just the same as what OP posted but without jQuery. – Jerodev Nov 17 '17 at 12:39
Same behavior like in my snippet. – Virinum Nov 17 '17 at 12:39

score 0 · Answer 2 · answered Nov 17 '17 at 12:36

0

You can parse the value to a float and use the toFixed function to always print the number with two decimals.

$("#input").keyup(function() {
  $("#output").text(
    parseFloat($("#input").val()).toFixed(2)
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" min="0.00" step="0.01" max="999.99">
<p id="output"></p>

answered Nov 17 '17 at 12:36

Jerodev

32,252
11
87
108

This has effect on the input-text but not the value. – Virinum Nov 17 '17 at 12:41
I thought that was the point, why else did you include the javascript? – Jerodev Nov 17 '17 at 12:45
It's just a short snippet of my project. I want to read the value from the input and work with it. But for this work it has to be _1.00_ and not _1_. – Virinum Nov 17 '17 at 12:55

How to get full value of number input in Firefox with zeros

2 Answers2