javascriptjqueryhtmlcss

make html text input field grow as I type?

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. Can this be done in straight css, html, preferably without javascript?

Do post your js/jquery solutions too of course, but if this is doable without them - that be great.

my try here:

http://jsfiddle.net/jszjz/2/

Solution

  • Here is an example with only CSS and Content Editable:

    span {
  border: solid 1px black;
}

div {
  max-width: 200px;
}
    <div>
  <span contenteditable="true">sdfsd</span>
</div>

    Important note regarding contenteditable

    Making an HTML element contenteditable lets users paste copied HTML elements inside of this element. This may not be ideal for your use case, so keep that in mind when choosing to use it.