HTML5 introduced some interesting form element changes. Inputs can now have an input type of “number”.
Web Browsers set character input restrictions and validation parameters for this input type. It will restrict to characters 0-9. This is great because it reduces the code overhead required to ensure a user enters the correct data. It will also show a numeric keypad on devices with dynamic keyboards. You should always have server side form validation. By using a number input you’re not relying entirely on JavaScript for client side validation.
Unfortunately there are now a couple of caveats to using the number input, depending on your use case. Firefox and Webkit browsers will show an Up and Down arrow for the user to increment the number. These can get in the way of styling or cause user error. The other issue is that this increment can be adjusted with the Mouse Wheel and the Up and Down keys.
The below code will allow you to remove the increment arrows and maintain the other benefits of a number input.
/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
jQuery(document).ready( function($) {
// Disable scroll when focused on a number input.
$('form').on('focus', 'input[type=number]', function(e) {
$(this).on('wheel', function(e) {
e.preventDefault();
});
});
// Restore scroll on number inputs.
$('form').on('blur', 'input[type=number]', function(e) {
$(this).off('wheel');
});
// Disable up and down keys.
$('form').on('keydown', 'input[type=number]', function(e) {
if ( e.which == 38 || e.which == 40 )
e.preventDefault();
});
});