HTML <input> size attribute not working?

Question

I have the following element which specifies the size="15". However the rendered element, which has the size attribute, has a width that fits 25 characters and could fit 30 or so if maxlength was greater? Maxlength does limit the # of characters.

<input id="txtSearch" name="txtSearch" type="text" maxlength="25" size="15" />

Answer 1

It probably depends on the font you are using, and what character you are testing with!

Answer 2

Monospaced Font

The best results I've seen came through using a monospace font:

<input type="text" size="4" style="font-family:monospace" />

Online Example: http://jsbin.com/epagi/edit Rendered neatly in Firefox, Chrome, Safari, and IE.

If you're using a variable-width font, you would have to use scripting to get a better guess as to what the expected width would be, but as you said, this isn't very elegant.

Variable-Width Font

I tried to work up a reasonable-simple solution for variable-width fonts, but ultimately you will need to see if it fits your project or not.

Basically what I did was set the text-transform of particular inputs to uppercase to get a semi-consistent expectation for how wide something will be when filled out with text. I then applied a classname that indicated the field should be auto-sized, and how many chars we're expecting: sizeMe-4. Using jQuery, I collected all of these inputs, and split this classname to get the number of chars expected.

I extended the String object to include a repeat method which allows me to easily create a string of the expected size, and add it to an ad-hoc span element to get the width. This width was then retroactively applied to the initial input element. The span is then discarded.

Online Demo: http://jsbin.com/epagi/2/edit

For convenience, here's the code:

<input type="text" name="pin" maxlength="4" class="sizeMe-4" 
       style="text-transform:uppercase" />

--

String.prototype.repeat = function(num) {
    return new Array( num + 1 ).join( this );
}

$(function(){
  $(":input[class^='sizeMe']").each(function(){
    var size = Number($(this).attr("class").split("-").pop());
    var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
    $(this).width( $(newW).width() );
    $(newW).remove();
  });
});​