CODEWITHSUNDEEP
htmlformstextboxcharacter
Atul Rai
Atul Rai

Reputation: 138

Html input type text size issue

I have a input field in html form

<input type="text" size="30">

I want to display only 30 char so i set the size as 30 .

But the behavior of the text field depends upon what char is entered as input some time it displays less char than 30 . some times it displays more than 30 .

for example :

if I enter 123456789012345678901234567890 it will display only 28 characters even though it has 30 characters

if I enter on only l as a character I can enter almost 50 chars

what can be the cause of this I am not able to understand do any one have a idea ? I want to know do each char takes different space to display in form ?

Upvotes: 2

Views: 2077

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The widths of characters (or, more exactly, advance widths of glyphs) generally vary a lot, from a narrow “i” to a wide “W”. The size attribute sets the visible width as a number of “average” characters, a vague concept (average ovetr what?), interpreted different by different browsers.

Only some fonts have equal width for all characters. Such fonts are called “monospace”, and they are generally difficult to read and may make the text look like written on a typewriter, but they still have their uses. To have a width of 30 characters, consider setting something like font-family: Consolas, monospace on the input element.

Upvotes: 3

Nelson Menezes
Nelson Menezes

Reputation: 109

This behavior is because the size that different characters you enter is different. Size of some is less and some is more. If it occupies lesser space then the text box will occupy more characters. This is the sole reason for the problem you are experiencing. (if you use i instead of 1 it will occupy more than 50 char also.)

If you aim at occupying exactly 30 characters then try using the property "maxlength" as follows:

<input type="text" maxlength="30">

Upvotes: 1

Coder
Coder

Reputation: 7076

Try

<input type="text" maxlength="30">

Demo for both size and maxlength difference

Upvotes: 0

Related Questions