By default <input type="number">
elements will increment/decrement by its step
attribute value when pressing the up/down arrows. Kilian Valkhof provides us with some JavaScript to have these elements also respond to up/down keypresses while holding modifier keys.
When someone uses the arrow keys in the input field, we want the following to happen:
- If they press up or down, we want to add or subtract 1
- If they hold SHIFT and press up or down, we want to add or subtract 10
- If they hold ALT and press up or down, we want to add or subtract 0.1
- If they hold CTRL and press up or down, we want to add or subtract 100. On Mac, we want to use the CMD key for consistency.
Supercharging <input type="number">
→
💡 Did you know the DevTools in your browser also support these modifier keys? Try editing a numeric value and press up/down while holding SHIFT
/ALT
/CMD
😉
⚠️ In some cases you’ll most likely be better off by avoiding <input type="number">
, and should use go for <input type="text" inputmode="numeric" pattern="[0-9]*">
instead`.