Make <input type="number"> respond to arrow keys with modifier keys

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`.

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.