How can I set max-length in an HTML5 "input type=number" element?

Exploring the restrictions of input type=number

Fundamentally, the <input type="number"> element does not inherently support the maxlength attribute for a handful of reasons including:

• It's used primarily for numeric entries, and the idea is to maximize value, not length.
• Length of numeric entries vary owing to factors like decimals and negatives.

However, in the real world, developers need to control length for proper data validation and improved user experience.

Triggering JavaScript events for maxlength

You can leverage JavaScript events, such as oninput and onkeyup, to enforce a specific character length. For instance:

<input type="number" id="numInput" oninput="maxLengthCheck(this)">
<script>
function maxLengthCheck(object) {
  if (object.value.length > object.maxLength)
    object.value = object.value.slice(0, object.maxLength) // Oops! You've reached your limit!
}
</script>


And don't forget to add maxLength programmatically:

document.getElementById('numInput').maxLength = 5; // Limiting to 5 cause I like high-fives!


This ensures the user's input maintains the limit as they type.

Alternative inputs and patterns

Facing validation complexities with type="number"? You can switch to alternatives that respect length restrictions:

• <input type="tel"> comes with native maxlength support, while also displaying a number pad on mobile.
• <input pattern="[0-9]{5}"> restricts the pattern to a 5-digit numeric input.

Both options retain the usability of numeric input with less fuss.

Using custom validation messages for input values

Informative feedback is integral when users exceed the maxlength:

document.getElementById('numInput').oninput = function() {
  if (this.value.length > this.maxLength) {
    this.setCustomValidity('5 is the magic number! Please, no more than 5 digits.');
  } else {
    this.setCustomValidity('');
  }
};


With this snippet, users receive immediate guidance if they surpass the limit, enhancing their experience.

Handling form submission and exceeding max

When handling form submissions, stop the default action and validate the input using JavaScript if it exceeds max:

document.querySelector('form').onsubmit = function(event) {
  var input = document.getElementById('numInput');
  if (input.value.length > input.maxLength) {
    event.preventDefault();
    alert('Hold up! You've gone beyond max length!');
  }
};


This step ensures data integrity before it reaches your server.

Getting to grips with spinner buttons

When you use type number, spinner buttons can provide a good preview of the allowed range. They let users increment values without exceeding the specified max:

<input type="number" min="1" max="99999" step="1">


With the above <input> element, users can adjust values within 1 to 99999 using the up/down arrows (no more, no less).