javascript - How To add a min and max length verification to a number field? -

i have code number field:

<label for="phone">phone number</label><br/> <input id="phone" name="phone"class="form-control" type="tel"         pattern="^\d{3}\d{3}\d{4}$" maxlength="10"  minlength="10"  required > 

however doesn't limit numbers , 1 format works want like:

<input name="phone" type="number"  class="form-control"     placeholder="phone number" maxlength="10"  minlength="10"     required="required"/> 

and code not limit max , min lengths! how lengths work?

from mozilla docs:

if value of type attribute text, email, search, password, tel, or url, attribute specifies minimum number of characters (in unicode code points) user can enter. other control types, ignored.

that means attribute not work expected number input.

here's 1 way can define own length-validator (of course can write own ;) ):

numberinput.addeventlistener('input', function() {     this.value = this.value.substring(0, max_length); }