make html text input field grow as I type?

Question

I can set initial text input size in css, like so:

width: 50px;

But I would like it to grow when I type until it reaches for example 200px.

Answer 1

A couple of things come to mind:

Use an onkeydown handler in your text field, measure the text*, and increase the text box size accordingly.

Attach a :focus css class to your text box with a larger width. Then your box will be larger when focused. That's not exactly what you're asking for, but similar.

* It's not straightforward to measure text in javascript. Check out this question for some ideas.