If you're familiar with the del.icio.us tag search box, then you'll know it will grow with the length of the content you enter.

This is particularly useful for search boxes or tagging entry boxes, though the only downfall (I think) of del.icio.us's entry box is that it can grow to become wider than the entire page width.

I've written a jQuery plugin that plugs the same functionality in to any text box - but also includes the max-width limiting functionality.

Download textGrow.js

UK EVENTAttend ffconf.org 2024

The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!

Example

See text grow example - I couldn't post the JS code using my WordPress blog :-(

Usage

jQuery('input').textGrow({ pad: 25, min_width: 25, max_width: 300 });

  • pad: trailing padding in pixels - default 25
  • min_width: minimum width of the text box in pixels
  • max_width: maximum width of the text box in pixels

However, you don't need to pass the min and max width via the JavaScript, to offer even more flexibility this can be read through the CSS (and it's legal CSS too). This will be read from the style attribute, or the class definitions in the CSS.

You can use min-width and max-width to apply specific control to text boxes, for example:

<input type="text" style="min-width: 25px; max-width: 300px" name="s" />

If you have any comments, bugs or suggestions please drop me a comment below.