maxlength ignored for input type number in Chrome

Question

The maxlength attribute is not working with  lt input type  number  gt   This happens only in Chrome    lt input type  number  class  test css   maxlength  4   id  flight number  name  number   gt

User · Answer

You can try this as well for numeric input with length restriction   lt input type  tel  maxlength  4    gt

User · Answer

In my experience most issues where people are asking why maxlength is ignored is because the user is allowed to input more than the  allowed  number of characters    As other comments have stated  type  number  inputs do not have a maxlength attribute and  instead  have a min and max attribute   To have the field limit the number of characters that can be inserted while allowing the user to be aware of this before the form is submitted  browser should identify value   max otherwise   you will have to  for now  at least  add a listener to the field    Here is a solution I ve used in the past  http   codepen io wuori pen LNyYBM

User · Answer

lt input type  number  gt  is just that    a number input  albeit  unconverted from a string to float via Javascript    My guess  it doesn t restrict characters on key input by maxLength or else your user could be stuck in a  key trap  if they forgot a decimal at the beginning  Try putting a   at index 1 when an  lt input type text  gt   maxLength  attr has already been reached   It will however validate on form submit if you set a max attribute   If you re trying to restrict validate a phone number  use the type  tel  attr value  It obeys the maxLength attr and brings up the mobile number keyboard only  in modern browsers  and you can restrict input to a pattern  i e  pattern   0-9  10

User · Answer

maxlenght - input type text   lt input type  email  name  email  maxlength  50  gt    using jQuery      input   attr  maxlength   50    maxlenght - input type number  JS   function limit element  max            var max chars   max      if element value length  gt  max chars            element value   element value substr 0  max chars              HTML   lt input type  number  name  telefono  onkeydown  limit this  20    onkeyup  limit this  20    gt

User · Answer

I once got into the same problem and found this solution with respect to my needs  It may help Some one    lt input type  number  placeholder  Enter 4 Digits  max  9999  min  0   onKeyDown  if this value length  4  amp  amp  event keyCode gt 47  amp  amp  event keyCode  lt  58 return false     gt    Happy Coding

User · Answer

Many guys posted onKeyDown   event which is not working at all i e  you can not delete once you reach the limit  So instead of onKeyDown   use onKeyPress   and it works perfectly fine    Below is working code    x000D   x000D  User will not be allowed to enter more than 4 digits x000D   lt br gt  x000D   lt input type  number  pattern    -  d     d     onKeyPress  if this value length  4  return false     gt  x000D   x000D   x000D

User · Answer

I know there s an answer already  but if you want your input to behave exactly like the maxlength attribute or as close as you can  use the following code    function       methods                   addMax will take the applied element and add a javascript behavior        that will set the max length             addMax  function                set variables         var             maxlAttr     this  attr  maxlength                maxAttR     this  attr  max                x   0              max                   If the element has maxlength apply the code          if  typeof maxlAttr     typeof undefined  amp  amp  maxlAttr     false                    create a max equivelant             if  typeof maxlAttr     typeof undefined  amp  amp  maxlAttr     false                   while  x  lt  maxlAttr                        max     9                       x                                    maxAttR   max                                Permissible Keys that can be used while the input has reached maxlength             var keys                     8     backspace                 9     tab                 13     enter                 46     delete                 37  39  38  40    arrow keys lt   gt v                               Apply changes to element               this                   attr  max   maxAttR    add existing max or new max                  keydown function event                           restrict key press on length reached unless key being used is in keys array or there is highlighted text                     if    this  val   length    maxlAttr  amp  amp    inArray event which  keys     -1  amp  amp  methods isTextSelected      false  return false                                                      isTextSelected returns true if there is a selection on the page          This is so that if the user selects text and then presses a number        it will behave as normal by replacing the selection with the value        of the key pressed              isTextSelected  function               set text variable         text               if  window getSelection                text   window getSelection   toString              else if  document selection  amp  amp  document selection type     Control                 text   document selection createRange   text                    return  text length  gt  0               maxlengthNumber   function            Get all number inputs that have maxlength      methods addMax call    input type number                    Apply it    maxlengthNumber

User · Answer

Try this   lt input type  quot number quot  onkeypress  quot return this value length  lt  4  quot  oninput  quot if this value length gt  4    this value   this value slice 0 4     quot    gt

User · Answer

I will make this quick and easy to understand   Instead of maxlength for type  number   maxlength is meant to define the maximum amount of letters for a string in a text type   use min    and max       Cheers

User · Answer

From MDN s documentation for  lt input gt      If the value of the type attribute is text  email  search  password  tel  or url  this attribute specifies the maximum number of characters  in Unicode code points  that the user can enter  for other control types  it is ignored    So maxlength is ignored on  lt input type  number  gt  by design   Depending on your needs  you can use the min and max attributes as inon suggested in his her answer  NB  this will only define a constrained range  not the actual character length of the value  though -9999 to 9999 will cover all 0-4 digit numbers   or you can use a regular text input and enforce validation on the field with the new pattern attribute    lt input type  text  pattern   d   maxlength  4  gt

User · Answer

The absolute solution that I ve recently just tried is    lt input class  class-name  placeholder  1234567  name  elementname   type  text  maxlength  4  onkeypress  return  event charCode    8    event charCode    0    event charCode    13    null   event charCode  gt   48  amp  amp  event charCode  lt   57    gt

User · Answer

try use tel    maxlength  quot 5 quot  type  quot tel quot

User · Answer

Chrome  technically  Blink  will not implement maxlength for  lt input type  number  gt    The HTML5 specification says that maxlength is only applicable to the types text  url  e-mail  search  tel  and password

User · Answer

Here is my solution with jQuery    You have to add maxlength to your input type number     body   on  keypress    input type number  maxlength    function event       var key   event keyCode    event charCode      var charcodestring   String fromCharCode event which       var txtVal     this  val        var maxlength     this  attr  maxlength        var regex   new RegExp    0-9              8   backspace 46   Del 13   Enter 39   Left 37   right Tab   9     if  key    8    key    46    key    13    key    37    key    39    key    9            return true               maxlength allready reached     if txtVal length  maxlength           event preventDefault            return false               pressed key have to be a number     if   regex test charcodestring             event preventDefault            return false            return true        And handle copy and paste      body   on  paste    input type number  maxlength    function event          catch copy and paste     var ref     this       var regex   new RegExp    0-9           var maxlength   ref attr  maxlength        var clipboardData   event originalEvent clipboardData getData  text        var txtVal   ref val     current value     var filteredString           var combined input   txtVal   clipboardData   dont forget old data      for  var i   0  i  lt  combined input length  i              if  filteredString length  lt  maxlength                if  regex test combined input i                      filteredString    combined input i                                     setTimeout function            ref val     val filteredString        100         I hope it helps somebody

User · Answer

If you want to do it in a React Function Component or without using  quot this quot   here is a way to do it       lt input onInput  handleOnInput   gt       const handleOnInput    e    gt        let maxNum   4      if  e target value length  gt  maxNum          e target value   e target value slice 0  maxNum

User · Answer

Change your input type to text and use  quot oninput quot  event to call function   lt input type  quot text quot  oninput  quot numberOnly this id   quot  class  quot test css quot  maxlength  quot 4 quot  id  quot flight number quot  name  quot number quot   gt   Now use Javascript Regex to filter user input and limit it to numbers only  function numberOnly id           Get element by id which passed as parameter within HTML element event     var element   document getElementById id          This removes any other character but numbers as entered by user     element value   element value replace    0-9  gi   quot  quot       Demo  https   codepen io aslami pen GdPvRY

User · Answer

I have two ways for you do that  First  Use type  tel   it ll work like type  number  in mobile  and accept maxlength    lt input type  tel    gt    Second  Use a little bit of JavaScript    lt  -- maxlength  2  -- gt   lt input type  tel  onKeyDown  if this value length  2  amp  amp  event keyCode  8  return false     gt

User · Answer

Input type text and oninput event with regex to accept only numbers worked for me   lt input type  quot text quot  maxlength  quot 4 quot  oninput  quot this value this value replace    0-9  g      quot  id  quot myId quot   gt

User · Answer

Done  Numbers only and maxlength work perfect   lt input  maxlength  quot 5 quot  data-rule-maxlength  quot 5 quot  style  quot height 30px width  786px  quot  type  quot number quot   oninput  quot javascript  if  this value length  gt  this maxLength  this value   this value slice 0  this maxLength   this value   this value replace    0-9   g      replace           g    1    quot    gt

User · Answer

Max length will not work with  lt input type  number  the best way i know is to use oninput event to limit the maxlength  Please see the below code    lt input name  somename      oninput  javascript  if  this value length  gt  this maxLength  this value   this value slice 0  this maxLength        type    number      maxlength    6     gt

User · Answer

lt input type  number  oninput  this value   this value replace    0-9   g       this value   this value replace           g    1     onKeyDown  if this value length  10  amp  amp  event keyCode  8  return false   gt    DEMO - JSFIDDLE

User · Answer

For React users    Just replace 10 with your max length requirement    lt input type  number  onInput   e    gt  e target value   e target value slice 0  10    gt

User · Answer

maxlength ignored for input type  quot number quot   That s correct  see documentation here Instead you can use type  quot text quot  and use javascript function to allow number only  Try this   x000D   x000D  function onlyNumber evt        var charCode    evt which    evt which   event keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                return false                return true    x000D   lt input type  text  maxlength  4  onkeypress  return onlyNumber event   gt  x000D   x000D   x000D

User · Answer

You can use the min and max attributes   The following code do the same    lt input type  number  min  -999  max  9999   gt

User · Answer

I was able archive it using this   lt input type  quot text quot  onkeydown  quot javascript  return event keyCode     8    event keyCode     46   true    isNaN Number event key   quot  maxlength  quot 4 quot  gt

[html] maxlength ignored for input type="number" in Chrome

Examples related to html

Examples related to google-chrome