Question 250420 in Html Question posted in
Some basic documentation can be found here.

Html – How to restrict the input of numbers to a specific range?

I’ve set the min and max values and the input field type to ‘number’, but I can still physically input any numbers in the field, regardless of the range. How can I limit the input of numbers to only the required range, preventing values below or above it?

<input
 type="number"
 min='40'
 max='270'
 className="input-field"
/>

input field

Yes, warning will show if I will click any button in form, but I want to block exact ability to input anything outside the range

Tags:

3

Answers


  1. 0

    Why did you use curly braces around the min and max values?

    You should rather use single or double quotes:

    <input
 type="number"
 min="40"
 max="270"
 className="input-field"
/>
    Login or Signup to reply.
  2. 0

    If you have set the min and max attributes on an HTML input field with the type set to "number," but users can still input values outside the specified range, it may be due to a couple of reasons:

    Browser Support: Not all browsers fully support the min and max attributes for number input fields. While modern browsers generally do a good job of enforcing these constraints, older browsers may not. Ensure that you are using an up-to-date and widely supported browser.

    HTML Validation: Make sure your HTML markup is correct, and there are no syntax errors. The input field should be enclosed within a element with a submit button if needed. Additionally, confirm that the min and max attributes are correctly specified within the tag.

    Here’s an example of how to use the min and max attributes:

    Login or Signup to reply.
  3. 0

    You shouldn’t do that because a user wouldn’t be able to edit the number. Rather validate it on blur and reset to the previous valid value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search