How can I limit possible inputs in a HTML5 number element

Question

For  lt input type  number  gt  element  maxlength is not working  How can I restrict the maxlength for that number element

User · Answer

If you are looking for a Mobile Web solution in which you wish your user to see a number pad rather than a full text keyboard  Use type  tel    It will work with maxlength which saves you from creating extra javascript   Max and Min will still allow the user to Type in numbers in excess of max and min  which is not optimal

User · Answer

a simple way to set maxlength for number inputs is    lt input type  number  onkeypress  return this value length  lt  4   oninput  if this value length gt  4    this value   this value slice 0 4        gt

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

More relevant attributes to use would be min and max

User · Answer

Ugh   It s like someone gave up half way through implementing it and thought no one would notice   For whatever reason  the answers above don t use the min and max attributes   This jQuery finishes it up          input type  number     on  input change keyup paste   function            if  this min  this value   Math max parseInt this min   parseInt this value     0         if  this max  this value   Math min parseInt this max   parseInt this value     0             It would probably also work as a named function  oninput  w o jQuery if your one of those  jQuery-is-the-devil  types

User · Answer

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

User · Answer

HTML Input    lt input class  minutesInput  type  number  min  10  max  120  value      gt    jQuery       minutesInput   on  keyup keypress blur change   function e         if   this  val    gt  120           this  val  120          return false

User · Answer

As I found out you cannot use any of onkeydown  onkeypress or onkeyup events for a complete solution including mobile browsers  By the way onkeypress is deprecated and not present anymore in chrome opera for android  see  UI Events W3C Working Draft  04 August 2016    I figured out a solution using the oninput event only  You may have to do additional number checking as required such as negative positive sign or decimal and thousand separators and the like but as a start the following should suffice    x000D   x000D  function checkMaxLength event    x000D      Prepare to restore the previous value  x000D   if  this oldValue     undefined    x000D    this oldValue   this defaultValue  x000D     x000D   x000D   if  this value length  gt  this maxLength    x000D       Set back to the previous value  x000D    this value   oldVal  x000D     x000D   else   x000D       Store the previous value  x000D    this oldValue   this value  x000D     x000D       Make additional checks for   - or     etc  x000D       Also consider to combine  maxlength  x000D       with  min  and  max  to prevent wrong submits  x000D     x000D    x000D   x000D   x000D    I would also recommend to combine maxlength with min and max to prevent wrong submits as stated above several times

User · Answer

Since I was look to validate and only allow integers I took one the existing answers and improve it The idea is to validate from 1 to 12  if the input is lower than 1 it will be set to 1  if the input is higher than 12 it will be set to 12  Decimal simbols are not allowed   lt input id  quot horaReserva quot  type  quot number quot  min  quot 1 quot  max  quot 12 quot  onkeypress  quot return isIntegerInput event  quot  oninput  quot maxLengthCheck this  quot  gt   function maxLengthCheck object        if  object value trim       quot  quot                else if  parseInt object value   gt  parseInt object max             object value   object max             else if  parseInt object value   lt  parseInt object min             object value   object min            function isIntegerInput  evt        var theEvent   evt    window event      var key   theEvent keyCode    theEvent which      key   String fromCharCode  key       var regex     0-9        if    regex test key              theEvent returnValue   false           if theEvent preventDefault                theEvent preventDefault

User · Answer

I use a simple solution for all inputs  with jQuery     document  on  input     input type  quot number quot   maxlength    function          if  this value length  gt  this maxLength            this value   this value slice 0  this maxLength               The code select all input type  quot number quot  element where maxlength has defined

User · Answer

And you can add a max attribute that will specify the highest possible number that you may insert   lt input type  number  max  999    gt    if you add both a max and a min value you can specify the range of allowed values    lt input type  number  min  1  max  999    gt    The above will still not stop a user from manually entering a value outside of the specified range  Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot

User · Answer

Simple solution which will work on   Input scroll events  Copy paste via keyboard  Copy paste via mouse  Input type etc cases  lt input id  quot maxLengthCheck quot          name  quot maxLengthCheck quot          type  quot number quot          step  quot 1 quot          min  quot 0 quot          oninput  quot this value   this value  gt  5   5   Math abs this value  quot    gt     See there is condition on this value  gt  5  just update 5 with your max limit  Explanation   If our input number is more then our limit update input value this value with proper number Math abs this value   Else just make it to your max limit which is again 5

User · Answer

I had this problem before and I solved it using a combination of html5 number type and jQuery    lt input maxlength  2  min  0  max  59  name  minutes  value  0  type  number   gt    script      input name  minutes     on  keyup keypress blur change   function e          return false if not 0-9     if  e which    8  amp  amp  e which    0  amp  amp   e which  lt  48    e which  gt  57            return false       else            limit length but allow backspace so that you can still delete the numbers          if    this  val   length  gt   parseInt   this  attr  maxlength     amp  amp   e which    8  amp  amp  e which    0                return false                        I don t know if the events are a bit overkill but it solved my problem  JSfiddle

User · Answer

Lets say you wanted the maximum allowed value to be 1000 - either typed or with the spinner   You restrict the spinner values using  type  number  min  0  max  1000   and restrict what is typed by the keyboard with javascript  onkeyup  if parseInt this value  gt 1000   this value  1000  return false       lt input type  number  min  0  max  1000  onkeyup  if parseInt this value  gt 1000   this value  1000  return false     gt

User · Answer

As with type  number   you specify a max instead of maxlength property  which is the maximum possible number possible  So with 4 digits  max should be 9999  5 digits 99999 and so on   Also if you want to make sure it is a positive number  you could set min  0   ensuring positive numbers

User · Answer

You can combine all of these like this    lt input name  myinput drs  oninput  maxLengthCheck this   type    number  maxlength    3  min    1  max    999    gt    lt script gt       This is an old version  for a more recent version look at      https   jsfiddle net DRSDavidSoft zb4ft1qq 2    function maxLengthCheck object          if  object value length  gt  object maxLength        object value   object value slice 0  object maxLength       lt  script gt     Update  You might also want to prevent any non-numeric characters to be entered  because object length would be an empty string for the number inputs  and therefore its length would be 0  Thus the maxLengthCheck function won t work   Solution  See this or this for examples   Demo - See the full version of the code here  http   jsfiddle net DRSDavidSoft zb4ft1qq 1   Update 2  Here s the update code  https   jsfiddle net DRSDavidSoft zb4ft1qq 2   Update 3  Please note that allowing more than a decimal point to be entered can mess up with the numeral value

User · Answer

Maycow Moura s answer was a good start  However  his solution means that when you enter the second digit all editing of the field stops  So you cannot change values or delete any characters   The following code stops at 2  but allows editing to continue     MaxLength 2 onKeyDown  if this value length  2  this value   this value slice 0  - 1

User · Answer

Or if your max value is for example 99 and minimum 0  you can add this to input element  your value will be rewrited by your max value etc     lt input type  number  min  0  max  99      onKeyUp  if this value gt 99  this value  99   else if this value lt 0  this value  0     id  yourid  gt    Then  if you want   you could check if is input really number

User · Answer

You can specify it as text  but add pettern  that match numbers only    lt input type  text  pattern   d   maxlength  2  gt    It works perfect and also on mobile   tested on iOS 8 and Android   pops out the number keyboard

User · Answer

lt input type  number  onchange  this value Math max Math min this value  100   -100      gt    or if you want to be able enter nothing   lt input type  number  onchange  this value this value   Math max Math min this value 100  -100    null    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 for simple implementation    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

Another option is to just add a listener for anything with the maxlength attribute and add the slice value to that   Assuming the user doesn t want to use a function inside every event related to the input   Here s a code snippet  Ignore the CSS and HTML code  the JavaScript is what matters    x000D   x000D     Reusable Function to Enforce MaxLength x000D  function enforce maxlength event    x000D    var t   event target  x000D    if  t hasAttribute  maxlength      x000D      t value   t value slice 0  t getAttribute  maxlength     x000D      x000D    x000D   x000D     Global Listener for anything with an maxlength attribute  x000D     I put the listener on the body  put it on whatever  x000D  document body addEventListener  input   enforce maxlength   x000D  label   margin  10px  font-size  16px  display  block   x000D  input   margin  0 10px 10px  padding  5px  font-size  24px  width  100px   x000D  span   margin  0 10px 10px  display  block  font-size  12px  color   666   x000D   lt label for  test input  gt Text Input lt  label gt  x000D   lt input id  test input  type  text  maxlength  5   gt  x000D   lt span gt set to 5 maxlength lt  span gt  x000D   x000D   lt br gt  x000D   x000D   lt label for  test input  gt Number Input lt  label gt  x000D   lt input id  test input  type  number  min  0  max  99  maxlength  2   gt  x000D   lt span gt set to 2 maxlength  min 0 and max 99 lt  span gt  x000D   x000D   x000D

User · Answer

it s very simple  with some javascript you can simulate a maxlength  check it out     maxlength  2   lt input type  number  onKeyDown  if this value length  2  return false     gt

User · Answer

This might help someone   With a little of javascript you can search for all datetime-local inputs  search if the year the user is trying to input  greater that 100 years in the future      input type datetime-local    each function  index            this  change function           var today   new Date          var date   new Date this value         var yearFuture   new Date          yearFuture setFullYear yearFuture getFullYear   100          if date getFullYear    gt  yearFuture getFullYear               this value   today getFullYear     this value slice 4

User · Answer

You can specify the min and max attributes  which will allow input only within a specific range    lt  -- equivalent to maxlength 4 -- gt   lt input type  number  min  -9999  max  9999  gt    This only works for the spinner control buttons  however   Although the user may be able to type a number greater than the allowed max  the form will not submit      Screenshot taken from Chrome 15  You can use the HTML5 oninput event in JavaScript to limit the number of characters   myInput oninput   function          if  this value length  gt  4            this value   this value slice 0 4

User · Answer

x000D   x000D    For Angular I have attached following snippet  x000D   lt div ng-app    gt  x000D     lt form gt  x000D      Enter number   lt input type  number  ng-model  number  onKeyPress  if this value length  7  return false   min  0  gt  x000D     lt  form gt  x000D     lt h1 gt You entered    number   lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D    If you use  onkeypress  event then you will not get any user limitations as such while developing   unit test it   And if you have requirement that do not allow user to enter after particular limit  take a look of this code and try once

User · Answer

As stated by others  min max is not the same as maxlength because people could still enter a float that would be larger than the maximum string length that you intended  To truly emulate the maxlength attribute  you can do something like this in a pinch  this is equivalent to maxlength  16      lt input type  number  oninput  if value length gt 16 value value slice 0 16   gt

[html] How can I limit possible inputs in a HTML5 "number" element?

Examples related to html

Examples related to input

Examples related to numbers

Examples related to max