homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Horizontally Expanding Text Box?

Msg#: 4281625 posted 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

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4281625 posted 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

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


Msg#: 4281625 posted 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!


Msg#: 4281625 posted 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>
<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';

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

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4281625 posted 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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved