HTML5 : Input field with the type of 'number' will still accept higher value than its 'max' using keyboard inputs

Question

Hello guys need some help here. i want to have limit the numbers inputted in my input field by putting max attribute to it. i have no problem with that until i use my keyboard to input data on it. seems like the max attribute is not filtering the input coming from the keyboard.

e.g

<input type="number" max="5" />

i can't go until 6 using the up and down arrow but when i manually put 6 using keyboard it's accepts it. how can i prevent? thank you

Answer 1

You would need to use JavaScript to do it. This will not let the user enter a number higher than 5:

 <input type="number" max="5" onkeyup="if(this.value > 5) this.value = null;">

Another possible solution is to completely block the keyboard input by replacing onkeyup=".." event in the code above with onkeydown="return false".

Answer 2

have no problem with that until i use my keyboard to input data on it. seems like the max attribute is not filtering the input coming from the keyboard

This is how HTML5 validation/constraint work. However, it will invalidate when the form submits. Alternatively, you can validate it yourself. To validate yourself, you need to wire up Javascript and call the checkValidity() on the input element.

checkValidity() of the constraints API will check the validity state of the element and will return the state of whether the input element validate or not. This will also set the validity object on the input so that you can query more details.

Ref: https://html.spec.whatwg.org/multipage/forms.html#constraints and https://html.spec.whatwg.org/multipage/forms.html#form-submission-algorithm

You can also use the :invalid selector in CSS to highlight invalid inputs.

Example Snippet:

var input = document.getElementById('test'), 
    result = document.getElementById('result');
  
input.addEventListener('blur', validate);

function validate(e) {
  var isValid = e.target.checkValidity();
  result.textContent = 'isValid = ' + isValid;
  if (! isValid) {
    console.log(e.target.validity);
  }
}

input[type=number]:invalid {
  border: 2px solid red;
  outline: none;
}

<label>Enter value and press tab: </label><br/>
<input id="test" type="number" min="1" max="10" />
<hr/>
<p id="result"></p>