Input type number won t resize

Question

Why won t my input resize when I change the type to type  number  but it works with type  text    EXAMPLE      Email   lt input type  text  name  email  size  10  gt  lt br  gt    number   lt input type  number  name  email  size  10  gt

User · Answer

For  lt input type number gt   by the HTML5 CR  the size attribute is not allowed  However  in Obsolete features it says     Authors should not  but may despite requirements to the contrary elsewhere in this specification  specify the maxlength and size attributes on input elements whose type attributes are in the Number state  One valid reason for using these attributes regardless is to help legacy user agents that do not support input elements with type  number  to still render the text field with a useful width      Thus  the size attribute can be used  but it only affects older browsers that do not support type number  so that the element falls back to a simple text control   lt input type text gt    The rationale behind this is that the browser is expected to provide a user interface that takes the other attributes into account  for good usability  As the implementations may vary  any size imposed by an author might mess things up   This also applies to setting the width of the control in CSS    The conclusion is that you should use  lt input type number gt  in a more or less fluid setup that does not make any assumptions about the dimensions of the element

User · Answer

change type  number  to type  tel

User · Answer

Incorrect usage   Input type number it s made to have selectable value via arrows up and down   So basically you are looking for  width  CSS style   Input text historically is formatted with monospaced font  so size it s also the width it takes   Input number it s new and  size  property has no sense at all   A typical usage    lt input type  number  name  quantity  min  1  max  5  gt    w3c docs  to fix  add a style    lt input type  number  name  email  style  width  7em  gt    EDIT  if you want a range  you have to set type  range  and not   number   EDIT2   size is not an allowed value  so  no sense   Check out official W3C specifications     Note  The size attribute works with the following input types  text    search  tel  url  email  and password       Tip  To specify the maximum number of characters allowed in the    element  use the maxlength attribute

User · Answer

Seem like the input type number does not support size attribute or it s not compatible along browsers  you can set it through CSS instead   input type number       width  80px       Updated Fiddle

User · Answer

Use an on onkeypress event  Example for a zip code box  It allows a maximum of 5 characters  and checks to make sure input is only numbers   Nothing beats a server side validation of course  but this is a nifty way to go    x000D   x000D  function validInput e    x000D    e    e    e   window event  x000D    a   document getElementById  zip-code    x000D    cPress    e which    e which   e keyCode  x000D   x000D    if  cPress  gt  31  amp  amp   cPress  lt  48    cPress  gt  57     x000D      return false  x000D      else if  a value length  gt   5    x000D      return false  x000D      x000D   x000D    return true  x000D    x000D   zip-code   x000D    overflow  hidden  x000D    width  60px  x000D    x000D   lt label for  zip-code  gt Zip Code  lt  label gt  x000D   lt input type  number  id  zip-code  name  zip-code  onkeypress  return validInput event    required  required  gt  x000D   x000D   x000D

User · Answer

Rather than set the length  set the max and min values for the number input   The input box then resizes to fit the longest valid value    If you want to allow a 3-digit number then set 999 as the max    lt input type  number  name  quantity  min  0  max  999  gt

User · Answer

What you want is maxlength   Valid for text  search  url  tel  email  and password  it defines the maximum number of characters  as UTF-16 code units  the user can enter into the field  This must be an integer value 0 or higher  If no maxlength is specified  or an invalid value is specified  the field has no maximum length  This value must also be greater than or equal to the value of minlength   You might consider using one of these input types

[html] Input type "number" won't resize

Examples related to html

Examples related to text

Examples related to input

Examples related to resize

Examples related to numbers