0

Firefox forces all forms of zero to be 0. We are being asked to make the front end consistent if possible. So when 0 comes in as the value we want to show 00.00 as this is a financial site. I tested this outside my current code with both jquery and regular javascript.

document.getElementById('txtQuantity').value = '00.00';
$('#txtQuantity').val('00.00');

Both of those simple calls to set 00.00 come out as 0. I thought about input masking this but we don't want to force clients to type out decimal placeholders when all they want to input is an integer.

UNOBerry
  • 123
  • 1
  • 9
  • 2
    Is the input a `type="number"`? If so this may help: https://stackoverflow.com/questions/7790561/how-can-i-make-the-html5-number-field-display-trailing-zeroes – Rory McCrossan Mar 26 '19 at 17:25
  • *Firefox forces all forms of zero to be 0* — what does that mean? You're working with the **string** `'00.00'`, which is in no sense a "form of zero". – Pointy Mar 26 '19 at 17:26

1 Answers1

1

I suspect the issue is type="number" as @Rory hinted at. Given <input type="number" value="00.00">, Firefox will show an element that contains the value, 0.

It's not exactly semantic, but in my experience tel is more consistent across browsers. Note that this will also get rid of the spinner buttons (which in my use cases is preferred, but might not be in yours):

<p>number: <input type="number" value="00.00"></p>
<p>tel: <input type="tel" value="00.00" pattern="\d+\.\d+"></p>

Firefox:
 Firefox

Chrome:
 Chrome

Edge (FWIW):
 Edge

p.s.w.g
  • 146,324
  • 30
  • 291
  • 331
  • tel is allowing me type alpha. I checked w3 school and it looks like it's not supported on anything besides safari. Looked promising when I read your answer. – UNOBerry Mar 26 '19 at 17:49
  • @UNOBerry Correct. `tel` will allow you to type non-numeric characters, but (at least for me running FF 66.0) `number` does as well. You'll have to add your own validation / `onkeydown` handler to restrict inputs if that's required. You could use `pattern="\d+\.\d+` or similar (see updated answer) but that still allows you to type an invalid input. – p.s.w.g Mar 26 '19 at 18:37