jQuery - Setting number input value as float in Firefox

Question

I have a function bound to the blur event for a specific class (attached to number type inputs) that is intended to force two decimal places. The following function works in Chrome, but does not work in Firefox.

Code:

/**
 *	Force 2 decimal places for specified inputs
 *
 */
$(document).on('blur', '.to-dec', function() {

  // get value
  var value = $(this).val();

  // no value
  if (!value) return;

  // cast to 2 decimal places
  value = parseFloat(value).toFixed(2);

  // update value
  $(this).val(value);

});

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

If I output value before it is set, I get the expected value (ie. 3.00 for an input value of 3).

Anyone know why Firefox would be preventing this value to be set? I've already tried to use parseFloat() when setting the value with val().

Thanks!

It looks like Firefox automatically removes insignificant digits in type=number — Barmar
– Barmar, Commented Apr 28, 2017 at 22:20
@Barmar Yeah, I just found this bug report from 3 years ago: bugzilla.mozilla.org/show_bug.cgi?id=1003896 Since this issue won't affect my functionality, I think I'll just let it fly. — Joe Devine
– Joe Devine, Commented Apr 28, 2017 at 23:01

Dan Philip Bejoy · Accepted Answer · 2017-04-28 21:28:10Z

2

An wasy way to make it work in FireFox will be to make the input type "text" and still maintain a type number behaviour with slight modifications to your code, Such as to clear the input if the value is NaN.

$(document).on('blur', '.to-dec', function() {
  // get value
  var value = $(this).val();
  if (isNaN(value)) {
    $(this).val('');
  } else if (!value) {
    // no value
    return;
  } else {
    // cast to 2 decimal places
    value = parseFloat(value).toFixed(2);
    // update value
    $(this).val(value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="to-dec" min="0" step="0.01">

answered Apr 28, 2017 at 21:28

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Devine Over a year ago

Thanks for the answer. I forgot to included the 'required' attribute in my code example. I am verifying the validity of each field on my page whenever fields change to determine whether the user can move on to the next step in the form. I would like to keep the 'number' input type so that the red 'required' border still displays when an invalid value is entered, such as a negative number. However, I could just handle these restrictions in this function too.

Collectives™ on Stack Overflow

jQuery - Setting number input value as float in Firefox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related