How to restrict user to type 10 digit numbers in input element

Question

I want to create a input field for phone number   I am creating input field using JavaScript dynamically    lt input type  text  id  phone  name  phone  gt    How to restrict users to type only 10 digit numbers in order to get a phone number

User · Answer

Add a maxlength attribute to your input    lt input type  text  id  phone  name  phone  maxlength  10  gt    See this working example on JSFiddle

User · Answer

HTML   lt input type  text  id  youridher  size  10  gt    Use JQuery   SIZE   10   document  ready function               youridher   bind  keyup   function                  if     youridher   val   length  lt   SIZE  amp  amp  PHONE REGEX                    return true                            else                   return false

User · Answer

Use maxlength   lt input type  text  maxlength  10    gt

User · Answer

whoever is checking this post in 2020  they can use  lt input inputmode  quot tel quot  gt  for phone numbers  10 digit    lt input inputmode  quot numeric quot  maxLength  5  gt  for numeric type and restrict to only 5 digits

User · Answer

whereas you could use maxLength on the input  and some javascript validation  it will still be necessary to do server side validation anyway

User · Answer

The snippet below does the job as expected    lt input type  text  name  AUS  pattern   0-9  10   title  You can enter only 10 digits       gt      type  text   lt  -- always -- gt    name  AUS   lt  -- for Australia -- gt    pattern   0-9  10    lt  -- 10 digits from 0 to 9 -- gt    title  You can enter only 10 digits      lt  -- Pops a warning when input mismatches -- gt

User · Answer

This is what I use   lt input type  quot tel quot  name  quot phoneNumber quot  id  quot phoneNumber quot  title  quot Please use a 10 digit telephone number with no dashes or dots quot  pattern  quot  0-9  10  quot  required   gt   lt i gt 10 digits lt  i gt   It clarifies exactly what is expected in the entry and gives usable error messages

User · Answer

Here all of the above outputs are giving a 10 digit number  but along with that the input field is accepting characters also  which is not the full solution  In order to set the 10 digit numbers only  we can use an input tag along with that type as number  and in that we can remove the up-down array by writing some small code in css which is shown below along with the input tag     lt input name  phone  maxlength  10  pattern   1-9  1  0-9  9   class  form-control  id  mobile   placeholder  Enter your phone Number  type  number  gt    input type number   -webkit-inner-spin-button  input type number   -webkit-outer-spin-button        -webkit-appearance  none      -moz-appearance  none      appearance  none      margin  0

User · Answer

You can use maxlength to limit the length  Normally for numeric input you d use type  number   however this adds a spinny box thing to scroll through numbers  which is completely useless for phone numbers  You can  however  use the pattern attribute to limit input to numbers  and require 10 numbers too  if you want     lt input type  text  maxlength  10  pattern   d 10   title  Please enter exactly 10 digits    gt

User · Answer

document  on  keypress    typeyourid  function e   if   e target  prop  value   length gt  10   if e keyCode  32   return false         Advantage is this works with type  number

User · Answer

lt input type  text  name  mobile number  pattern  0-9  1  0-9  9  gt

User · Answer

use a maxlength attribute to your input    lt input type  text  id  phone  name  phone  maxlength  10  gt    See the fiddle demo here Demo

User · Answer

Well I have successfully created my own working answer    lt input type  text  id  phone  name  phone  onkeypress  phoneno    maxlength  10  gt    as well as       lt script gt                     function phoneno                              phone   keypress function e                    var a                       var k   e which                   for  i   48  i  lt  58  i                        a push i                    if    a indexOf k  gt  0                       e preventDefault                                      lt  script gt

User · Answer

Please find below code if you want user to restrict with entering 10 digit in input control   lt input class  form-control  input-md text-box single-line  id  ContactNumber  max  9999999999  min  1000000000  name  ContactNumber  required  required  type  number   value  9876658688  gt    Benefits -    It will not allow to type any alphabets in input box because type of input box is  number  it will allow max 10 digits because max property is set to maximum possible value in 10 digits it will not allow user to enter anything less than 10 digits as we want to restrict user in 10 digit phone number  min property in code is having minimum possible value in 10 digits so it will tell user to enter valid 10 digit value not less than that

User · Answer

maxlength restrict the number of digits which cannot be more than the desired digits but it accepts less than the desired digits  If mobile No maxlength  10  it will not accept 11 but may accept anything upto 10

User · Answer

HTML   lt input type  text  name  fieldName  id  fieldSelectorId  gt    This field only takes at max 10 digits number and do n t accept zero as the first digit   JQuery  jQuery document  ready function            jQuery   fieldSelectorId   keypress function  e             var length   jQuery this  val   length         if length  gt  9                return false           else if e which    8  amp  amp  e which    0  amp  amp   e which  lt  48    e which  gt  57                 return false           else if  length    0   amp  amp   e which    48                 return false

User · Answer

simply include parsley js file in your document and in input element of mobile number enter this  data-parsley-type   number  data-parsley-length   10 10   data-parsley-length-message   Enter a Mobile Number   you can change the message according to your requirement you also need to initialize parsley js file in your document by writing     lt script type  text javascript  gt             document  ready function                    form   parsley                     lt  script gt       ---above code in your document

User · Answer

try this    lt input type  text  name  country code  title  Error Message  pattern   1-9  1  0-9  9   gt     This will ensure   It is numeric  It will be max of 10 chars First digit is not zero

User · Answer

How to set a textbox format as 8 digit number 00000019   string i   TextBox1 Text  string Key   i ToString   PadLeft 8   0    Response Write Key

[javascript] How to restrict user to type 10 digit numbers in input element?

Examples related to javascript

Examples related to html

Examples related to css