2

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>
Amit Kumar
  • 73
  • 1
  • 2
  • 6
  • 3
    I notice you're using a number input but the placeholder and pattern are not a number (xxxx-xxxx-xxxx). Is it possible this works any better if you use a text input? – stealththeninja Sep 16 '20 at 02:50
  • 1
    I tried input text and it restrict the length however it takes alphanumeric numbers. – Amit Kumar Sep 16 '20 at 04:07
  • Does this answer your question? [How can I limit possible inputs in a HTML5 "number" element?](https://stackoverflow.com/questions/8354975/how-can-i-limit-possible-inputs-in-a-html5-number-element) – Isaac Apr 13 '21 at 04:11

6 Answers6

5

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

Choirunnisa
  • 51
  • 3
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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Hashan Siriwardena
  • 91
  • 2
  • 7
2

Please use this.

<input type="text" name="Aadhar" maxlength="12" placeholder="xxxx-xxxx-xxxx" pattern="\d*" required>

It worked to me.

cocoa
  • 350
  • 1
  • 2
  • 10
1

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/>
ron_olo
  • 146
  • 6
1

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.

Prateek Chaubey
  • 166
  • 1
  • 4
  • 16
0

Try to use type="tel" and maxlength

Yash Mohan
  • 13
  • 1
  • 4