Automatically Enlarge Form Field When Needed

Here is a little something to have fun with.

A text field grows larger as the site visitor types characters into it. It shrinks as characters are deleted.

The form field has an ID. It also has an onkeyup attribute. Whenever a character is typed into the field, a JavaScript is called with the field's internal identity and ID value.

The JavaScript adjusts the size="..." attribute of the field to be one character larger than the number of characters already in the field. The size stays within a maximum and a minimum.

Here is an example. The field's minimum size is 5 and its maximum size is 30.

Here is the code to reproduce the above example.

<form>
Type something: 
<input 
   id="myid" 
   style="font-family:monospace; font-size:14px;" 
   name="bignumber" 
   size="5" 
   onkeyup="ResizeField(this,'myid')">
</form>

<script type="text/javascript"><!--
function ResizeField(f,id) {
var minimum = 5;
var maximum = 30;
var size = 1 + f.value.length;
if(size > maximum) { size = maximum; }
else if(size < minimum) { size = minimum; }
document.getElementById(id).size = size;
}
//--></script>

Note the JavaScript call in the form field's onkeyup attribute. The function ResizeField() is called with two attributes: this and 'myid'

The this attribute is not within quotes. The word is a variable containing the field's internal identity.

The 'myid' attribute is quoted. It is the ID value assigned to the field.

ResizeField() uses those two attributes to determine the number of characters already in the field and to adjust the field's size="..." attribute.

In the JavaScript, you'll see

var minimum = 5;
var maximum = 30;

Adjust the numbers to represent the minimum size and the maximum size of the field on your web page.

Have a little fun :)

Will Bontrager