parseFloat working in chrome but not IE or Firefox

Question

I have a field that will round up to the nearest .25. This is working fine in Chrome but for some reason it will not allow me to type say 2.25 in IE or Firefox. It ignores that I am typing a dot. Is there something obvious I'm missing here?

Edit One thing I have noticed is that if I change keyup to blur it will work fine. I need this to run on keyup though. It will also accept .25 by itself but not a number then decimal. For example 2.25.

 $(document).on('keyup', '.Monday', findTotalMon); function findTotalMon() { var arr = document.getElementsByClassName('Monday'); var tot = 0; for (var i = 0; i < arr.length; i++) { if (parseFloat(arr[i].value)) { var newValue; newValue = (.25 * Math.round(4 * arr[i].value)); arr[i].value = newValue; tot += parseFloat(newValue); } } document.getElementById('totalHoursMon').value = tot; if (tot === 0) { document.getElementById('totalHoursMon').value = ''; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="form-control full-width Monday" name="monday" id="monday" type="number" step="any" /><br><br> <input class="form-control full-width totalBox" name="total" id="totalHoursMon" type="text" readonly="readonly"/>

Answer 1

The issue lies in the use of keyup and the overwriting of your fields value with the newly parsed / rounded float.

After typing your decimal separator, the input is parsed and rounded and the separator disappears, because "1." or "1," is parsed to 1.

One way to solve this is to only overwrite your field when the rounded input is different than the original input.

 $(document).on('keyup', '.Monday', findTotalMon); function findTotalMon() { var arr = document.getElementsByClassName('Monday'); var originalValue, newValue, tot = 0; for (var i = 0; i < arr.length; i++) { originalValue = arr[i].value; if (parseFloat(originalValue)) { newValue = (.25 * Math.round(4 * arr[i].value)); tot += parseFloat(newValue); if (newValue != originalValue) { // we're only overwriting input when the rounded value is different than the original arr[i].value = newValue; } } } document.getElementById('totalHoursMon').value = tot; if (tot === 0) { document.getElementById('totalHoursMon').value = ''; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input class="form-control full-width Monday" name="monday" id="monday" type="number" step="any" /><br><br> <input class="form-control full-width totalBox" name="total" id="totalHoursMon" type="text" readonly="readonly"/>

On a side note :

Using keyup and overwriting your user's input is really annoying. For instance, while testing, I realized you can't use backspace to correct your input. I know you said you had to use keyup, but I strongly advise you to use blur or keypress. For your user's sake :)