Firefox - input type number hides decimal places

Question

I got some inputs on a webform. I'm calculating things here. When I calculate stuff (using JS) I use .toFixed(2) function every time.
In IE and Chrome Numbers are always shown with 2 decimal places. That's what I want. In Firefox decimal places are getting hide.

Here some example of my control: <input type="number" value="19.00" name="tax" id="tax" min="0" step="0.01" class="input_number" tabindex="3">

Output:
- IE: 19.00
- FF: 19
- Chrome: 19.00

Solution:

Solution found and tested with the help the possible duplicate and the marked answer.

http://jsfiddle.net/duuy884a/7/

<input type="text" min="0" step="0.01" name="test" id="test" value="" pattern="[0-9]+([,\.][0-9]+)?" />
<input type="text" min="0" step="0.01" name="test2" id="test2" value="" readonly />
<button onclick="set()">check</button> 

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function set (  ){
    if ( document.getElementById("test").value.length <= 0 ){ return; }

    document.getElementById("test").value = document.getElementById("test").value.replace(/,/g, '.');
    var fInput = parseFloat( document.getElementById("test").value );
    if ( isNumber( fInput ) == true ){
        document.getElementById("test2").value = checkZeros( document.getElementById("test") );
    }
}

function checkZeros ( oInput ){
    if ( oInput.value === '') {
        return;
    }

    oInput.value = parseFloat(  oInput.value ).toFixed(2);    
    oInput.value =  oInput.value.toString();

    if ( oInput.value.indexOf('.') === -1) {
         oInput.value =  oInput.value + '.00';
    }
    while ( oInput.value.indexOf('.') >  oInput.value.length - 3) {
         oInput.value =  oInput.value + '0';
    }

    return oInput.value;
}

I found this Q too, but I didn't thought it will help me. Sry for not reading exactly. I think this could help me but this would mean I need to ad an event-listener for each input? I got around 15 of them and the user can add more to the form ... — Yaerox, Aug 13 '15 at 11:17
Since you are using this field for output/display purposes only and the user can not directly manipulate the value (at least in your fiddle) – why use a `number` field at all here? Simple `text` field, and the problem is gone – no? (Whether this even justifies the use of a form element _at all_ might be another question.) — CBroe, Aug 13 '15 at 12:13
In real I got a form for creating a bill. Which means the user can input data in my input-fields and calculate sum's and other stuff. This is why I use number field. — Yaerox, Aug 13 '15 at 12:22

Vibhesh Kaul · Accepted Answer · 2015-08-13T12:42:22.673

1

Solution based on the fiddle given by the OP in the comments section of the answer.

Change the test2 input type to text. And it'll work the way you want it to.

<input type="text" name="test2" id="test2" value="" readonly />

edited Aug 13 '15 at 12:42

answered Aug 13 '15 at 10:10

Vibhesh Kaul

2,593
1
21
38

I do this, but the Outpot shown in my Question is still the same. – Yaerox Aug 13 '15 at 11:12
can you show your script please? – Vibhesh Kaul Aug 13 '15 at 11:16
http://jsfiddle.net/duuy884a/ do this using Firefox, and maybe using another browser. – Yaerox Aug 13 '15 at 11:34
I've posted an edit. Check it out – Vibhesh Kaul Aug 13 '15 at 12:04
Yes but this means the user can input letters too .. I try to avoid this because it's a form for creating bills. – Yaerox Aug 13 '15 at 12:12
No you have to make the second box as text where are showing the output! – Vibhesh Kaul Aug 13 '15 at 12:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86886/discussion-between-psylogic-and-mike). – Vibhesh Kaul Aug 13 '15 at 12:20
I want this trailing 0's on all my controls, even on the one where the user entered data. – Yaerox Aug 13 '15 at 12:20

score -1 · Answer 2 · answered Aug 13 '15 at 09:56

-1

Firefox sees your value as a string and not as a number, try setting value as 19(Without quotation marks) then using toFixed(2) should set the value to 19.00 for calculating stuff.

answered Aug 13 '15 at 09:56

DieVeenman

457
1
3
18

Firefox - input type number hides decimal places

2 Answers2

Linked