Horizontally Expanding Text Box?

Forum Moderators: open

Message Too Old, No Replies

Horizontally Expanding Text Box?

IntegrityWebDev

8:37 pm on Mar 14, 2011 (gmt 0)

I'm seasoned with PHP but just getting into JS/jQuery stuff and I'm sure there is something out there or an otherwise easy way to do this but i can't seem to find it.

This is what I want to do:
* Textbox is 200px wide
* As person enters text that fills box (hits the 200px mark) the box starts expanding horizontally.
* At 300px, no mater what text they enter i want the box to stop expanding (but still accepts input).
* When it loses focus it snaps back to 200px wide.

Can this be done?

JAB Creations

6:54 am on Mar 15, 2011 (gmt 0)

Yes though don't use frameworks like jQuery as they add a lot of bloat and aren't cross-browser compatible.

You'll want to trigger a function onkeypress. The onblur function is triggered when focus is lost. JavaScript is an event oriented language so I highly recommend researching more about various W3C DOM based events. I also recommend staying away from things like document.write which doesn't work with XHTML and innerHTML as it does not work correctly with the DOM; frameworks take the easy route and rely on innerHTML so avoid them too.

<input id="example1" name="example1" onblur="setstylebyid('example1','width','200px');" onkeypress="my_function1('example1');" value="" />

You'll be able to call the following function...

 // i = id of the element
 // p = CSS property (e.g. font-size)
 // v = value (e.g. '20px')

function setstylebyid(i,p,v)
{
 if (document.getElementById(i))
 {
 var n = document.getElementById(i);
 if (n != null) {n.style[p] = v;}
 }
 else {alert('Error: the id \''+i+'\' was not found or has not yet been imported to the DOM.\n\nNew property intended: '+p+'\n\nNew value intended: '+v);
}

You'll just pass the id of the element you want to change the width of that way you can reuse this with other elements keeping the script dynamic. Since you want to change the width of the element based on the length of the value simply check the l variable (lower case L).

function my_function1(id)
{
 var l = document.getElementById(id).value.length;
 var w1 = 10; //width per character
 var w2 = l*w1; //characters times character width
 var new_width = 200+w2 // minimum width plus typed width
 if (new_width>500) {new_width = 500;} // prevent width over 500
 setstylebyid('example1','width',new_width+'px');
}

I haven't tested this out though when debugging JavaScript I can't emphasize how useful Opera's JavaScript console can be as well as WebKit based browsers like Safari or Chrome. Firefox is great though a lot of JavaScript errors aren't reported for some reason. IE8+ is actually pretty handy with reporting JavaScript errors. If you have trouble make sure you don't have duplicate ID's and that you're using the same value for id and name attributes to avoid issues with older versions of IE (e.g. id="example1" name="example1").

- John

IntegrityWebDev

1:12 pm on Mar 15, 2011 (gmt 0)

Thanks this is just what I needed to get rolling! A few syntax fixes and adding an IF statement because i dont want it to start expanding until I hit XX characters...I'm on my way!

IntegrityWebDev

1:43 pm on Mar 15, 2011 (gmt 0)

Just for the sake of completeness, this is what I did. I knew this would never be used (for me) anywhere but on text box width so I combined the functions and added other values. As I said, I'm sort of new at JS so it's quite possible I've not done something the best way but it seems to work well:

<!DOCTYPE html>
<html>
<head>
<title>JS Test TextBox</title>
<script type="text/javascript">
function textexpand(id, minwidth, maxwidth, chartoexpand)
{
var item = document.getElementById(id);
var l = document.getElementById(id).value.length;
if (l > chartoexpand) //only start after we've hit the point where it should expand
{
var w2 = ((l-chartoexpand) * 10) + minwidth;
var new_width = w2; // minimum width plus typed width
if (new_width>maxwidth) {new_width = maxwidth;} // prevent width over maxwidth
item.style['width'] = new_width+'px';
}
}
</script>

</head>
<body>
<input id="example1" name="example1" onkeypress="textexpand('example1', 200, 500, 20);" value="" style="width:200px;" />
</body>
</html>

JAB Creations

9:37 pm on Mar 15, 2011 (gmt 0)

Glad I could help and thanks for doing future thread readers the courtesy of posting your code, it's something I practice too. :)

- John