Create text box with auto-expansion width?

Question

How can I create a text box with automatically expanding width to fit it?

I continue to find a lot of information about extensions based on height, but not very wide.

I would also like this to apply to every text field on the page, not just specific ones.

Answer 1

Not sure if this is what you had in mind, but should this not work?

<script language="javascript">
function expand(f)
{
    f.size = f.size + 1;
}
</script>

<input type="text" size="20" onkeyup="expand(this)" />

Answer 2

If you want backspace key processing to use this:

<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20"> 

If you want to use backward manipulation and ignore the arrow keys, use this option:

<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6">

Answer 3

, , , , . :

<script type="text/javascript">
function expand(textbox){
    var minSize = 20;
    var contentSize = textbox.value.length;
    if(contentSize > minSize)
    {
        textboxSize = contentSize;
    }
    else
    {
        textboxSize = minSize;
    }
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />