regex working in chrome and ie but not firefox

Question

I have a form which I want to only allow numbers and decimal 1 place. This works in Chrome and IE but not in Firefox. It will remove the dot from Firefox. What am I doing wrong?

 $(document).on('change keyup', '.Monday, .Tuesday, .Wednesday, .Thursday, .Friday, .Saturday, .Sunday', function () { var sanitized = $(this).val().replace(/[^0-9.]/g, ''); $(this).val(sanitized); });

 <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" />

Answer 1

Looks like a bug in Firefox. It's easy to confirm that it's not about regex: in fact, any reassignment in keyup handler seems to break it up, effectively disallowing floats. For example (done with vanilla DOM API to prevent potential side-effects; it's the same with jQuery, of course):

 document.getElementById('demo').addEventListener('keyup', function() { var oldValue = this.value; console.log(oldValue); this.value = oldValue; });

 <input class="demo" id="demo" name="demo" type="number" />

Note that there's a subtle difference in keyup phase for numeric and non-numeric characters. For example, if there's already 4 entered in the control, and you press 2 , the logged value will be 42 . However, it still be 4 if you press . instead. Chrome and IE seem to disregard this difference, Firefox is a bit more straightforward.

---

Fortunately, it's quite easy to find a workaround for the bug - just listen for input event instead ( MDN docs ). Not only it's guaranteed to fire after the value is changed, it also handles such things as mouse-triggered copy-paste.

Answer 2

There are differences in implementation of the <input type="number"> element in different browsers, but when you use it, you should leave it to that element to perform the validation. And it does that by showing a red border (implementation dependent) instead of taking out invalid characters, because most believe that the latter solution is not user-friendly -- you don't want them to think their keyboard is broke.

There are the following issues playing in your case:

1. When you type a point after a series of digits, that is considered valid by your code, but by assigning it back to the input, it is interpreted as a number, and so the final point is removed from it.

2. When you first type a series of digits and then a letter the whole input gets cleared. This is because in Firefox the value you get from the input is already validated, and if not valid, the empty string is returned, even though the input still shows the characters.

The thing really is that you should choose whether you leave it to the browser or to your code to validate in the input. In the latter case, just remove the type="number" .