Vfields: Variable length input fields

Personally, I don't like it when the data I submit in an online form exceeds the input field I'm typing in.

It's annoying when half of your text gets cut off by the edge of the field. So today, I thought of a way to (perhaps) make input fields more usable.

Stretchy input fields

First of all: check out the example. Type in some text in the “first name” or “last name” input fields and make sure your data exceeds the field’s borders.

As you can see, the input field stretches along with your text (up until a 300px width). This way, your input is always visible in the field. It’s not really rocket science, but it might just provide users with a more merry experience.

Under the hood

vfields.js looks like this:

var vfields = {
	maxchars	 : 16,
	maxWidth	 : 300,
	initWidth	 : 150,
	charWidth	 : 5,
	vfield_class : 'vfield',
	init : function ()
	{
		var W3CDOM = (document.getElementsByTagName);
		if (!W3CDOM) return;
		var inputs = document.getElementsByTagName('input');
		for (var i=0; i<inputs.length; i++)
		{
			if (inputs[i].type == 'text' && inputs[i].className.indexOf(vfields.vfield_class) != -1)
			{
				inputs[i].onkeyup = vfields.checkLength;
			}
		}
	},
	checkLength : function ()
	{
		if (this.value.length >= vfields.maxchars)
		{
			var surplus	= this.value.length-vfields.maxchars;
			if ((vfields.initWidth + (surplus * vfields.charWidth)) < vfields.maxWidth)
			{
				this.style.width = (vfields.initWidth + (surplus * vfields.charWidth))+'px';
			}
		}
	}
}
window.onload = function ()
{
	vfields.init();
}

You can configure the script and adjust it to fit your needs by altering the variable at the top of the script:

maxchars	 : 16,
maxWidth	 : 300,
initWidth	 : 150,
charWidth	 : 5,
vfield_class : 'vfield',

The maxchars variable contains the amount of characters after which the input field should stretch. You should use a number which corresponds to the width of your input fields. It’s best to set this variable to a little less than the characters that actually fit into the field, so the script can start stretching the field on time (in order to also support the really fast typists among us).

You can set the maxWidth variable if you want to restrict the stretching of the input fields, so they won’t mess up your site’s design, for instance.

The initWidth represents the initial width of your input fields. This should correspond to the value of width in your stylesheet.

charWidth is the width you consider the inputted characters to have. Play around with this value and make it fit your font-size.

vfield_class is, naturally, the class-name you want to give all affected input fields.

Feedback and support

So, what do you think? Will this enhance the user experience? Or will it annoy the hell out of your users? I haven’t had time to test the script yet, but I sure will. In the meantime: let me know what you think or found out.

Also; since the stretch function is called onkeyup, it might get pretty heavy-weight. If you think you can enhance this script’s performance, let me know, I would be grateful.

The source code and working example can be downloaded here as a RAR archive. Enjoy!