7

How do you match up the size and maxlength of a text input box? It is very annoying that the maxlength and size attributes don't line up and are dependent on the font use.

 Example input:<input type="text" size="4" maxlength="4" />

enter image description here

Any suggestions?

Mason240
  • 2,390
  • 1
  • 26
  • 39
  • 1
    This should help. It explains what the size="4" actually refers to. http://stackoverflow.com/questions/6699575/size-attribute-for-an-input-field-not-being-honored – Scott Feb 01 '13 at 16:09

1 Answers1

6

I don't think it will match up and it will very depending on the browser. Best bet is to use CSS to set the width of the input.

<input type="text" maxlength="4" value="1234" />

input {width:30px;}

http://jsfiddle.net/BqEsd/67/

You could also come up with some sort of function to size it based off of character, font size, and language. Something like this for example..

Example:

http://jsfiddle.net/krishollenbeck/ohpy5L95/3/

Kris Hollenbeck
  • 15,752
  • 18
  • 64
  • 99