'HTML Input type number is not working with maxlength

I'm using below html tag and not able to get the restrictions on numbers, I need user to enter 12 digit only however as per HTML tag by default 'maxlength' does not work with <input type ="number">, I tried min and max tag, it did not help either.

Could you share if any way to do it in HTML only?

<input type="number" name="Aadhar" maxlength="12" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required>
htmlmaxlengthinput-type-range


Solution 1:[1]

Max length will not work with <input type="number". Maybe you can read this click here to read more to resolve ur problem

Solution 2:[2]

Unfortunately, maxlength attribute is not supported for inputs that are type number. Therefore, the best approach is to use JS. Please refer to the following documentation and they might provide some clarity.

Solution 3:[3]

enter image description here

Use max instead of maxlength

<input type="number" name="Aadhar" max="12" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required>

When the user will click on Submit Button It will show that the value should be less than 12. This can be only used inside a form.

Solution 4:[4]

You can try this.

function numOnly(id) {
    // Get the element by id
    var element = document.getElementById(id);
    // Use numbers only pattern, from 0 to 9 with \-
    var regex = /[^0-9\-]/gi;
    // Replace other characters that are not in regex pattern
    element.value = element.value.replace(regex, "");
}
<input type="text" id="number" oninput="numOnly(this.id);" name="Aadhar" maxlength="14" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required/>

Solution 5:[5]

Try to use type="tel" and maxlength

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman
Solution 3 Prateek Chaubey
Solution 4 ron_olo
Solution 5 Yash Mohan

Related Questions