Failed to set maxlength property for numeric field in HTML5

Question

This is a text box. See ... I set the maxlength property to 10. Thus, only 10 characters can be entered

<input maxlength="10" id="txt_name" name="txt_name" type="text" required="required"/>

This is a field of numbers. I want this to also have a maximum length of 10 so that users can enter their 10-digit mobile number. This restricts user access to additional numbers.

 <input id="txt_mob" name="txt_mob" type="number" maxlength="10"/>

But the maxlength function works with numeric fields. What for?? Is there a way to do this without using javascript or jQuery?

Here is FIDDLE .

Answer 1

number type does not accept maxlength attribute. you can try this

put the text in the text and use it.

script , .

<script>
function isNumber(event) {
  if (event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 190 && charCode > 31 && 
       (charCode < 48 || charCode > 57) && 
       (charCode < 96 || charCode > 105) && 
       (charCode < 37 || charCode > 40) && 
        charCode != 110 && charCode != 8 && charCode != 46 )
       return false;
  }
  return true;
}
</script>

onkeydown="return isNumber(event);"

<input type="text" onkeydown="return isNumber(event);" maxlength="10" />

Answer 2

min/max:

<input type="number" id="txt_mob" name="txt_mob" min="1" max="5">

- w3schools:

http://www.w3schools.com/tags/att_input_max.asp

Answer 3

maxlength, . min = "0" max = "10". :

http://www.w3schools.com/tags/att_input_max.asp

Answer 4

<input type="number" name="quantity" min="1" max="9999999999">

Answer 5

mdn,

If the value of the type attribute is text, email address, search, password, tel or url, this attribute defines the maximum number of characters (in Unicode code points) that the user can enter; for other types of control it is ignored.

So maxlength is ignored on

     <input type="number">

by design. Thus, you can use regular text input and force a check in a field with a new template attribute

     <input type="text" pattern="([0-9]{3})" maxlength="4">

Hope this helps some ...