Retrieving Raw Input from HTML5 Number Input

In HTML5, the element allows the user to input numerical values. However, if the input is invalid (e.g., contains non-numerical characters), its value property returns an empty string.

The Problem:

How can we retrieve the raw input from a field, including invalid text?

The Solution:

While the specifications prevent retrieval of invalid values, there is no way to determine whether the input is empty or contains invalid text. Therefore, a different approach is required.

Alternative Approach:

Instead of relying on the value property, we can use an event listener on the input element to capture the user's input in real-time.

Code Example:

const numberInput = document.getElementById('edQuantity');

numberInput.addEventListener('input', (event) => {
  const rawValue = event.target.value;

  if (isNaN(rawValue)) {
    // Input is invalid text; color it red
    numberInput.classList.add('error');
  } else {
    // Input is a valid number; color it green
    numberInput.classList.remove('error');
  }
});

This script attaches an event listener to the element that captures the input value whenever it changes. It then checks whether the value is a valid number; if it's not, it colors the input red; otherwise, it colors it green.

Note:

This approach allows you to get the raw input, including invalid text, but the validation and handling of invalid input are up to you.