While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireFox.
My client's requirement is for the field to display a number pad on mobile devices when the user starts typing. Additionally, if the user tries to input words, they should be automatically removed.
Check out the example fiddle here
HTML:
<input name="pricePerHour" id="pricePerHour" type="number" class="form-control" placeholder="Price Per Hour" required />
<br><br>
<input name="pricePerHour" id="costPerHour" type="text" class="form-control" placeholder="Cost Per Hour" required />
Javascript:
$("#pricePerHour,#costPerHour").on("keyup", function() {
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if (!valid) {
this.value = val.substring(0, val.length - 1);
}
});