Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dynamically expand/contract textbox height 1

Status
Not open for further replies.
travisbrown

travisbrown

Technical User
Dec 31, 2001
1,016
Hmm...Is there a way to have a textbox size dynamically as you are typing (or deleting). I've initially set the height to the content using a serverside function, but stymied on how to dynamically resize on the clientside. I'm sure it's not difficult.

Any ideas?
 
Sort by date Sort by votes
something like this?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script type="text/javascript"><!--

function resizeMe(objText) {
    var iMin = 9;
    objText.size = (objText.value.length<iMin)?iMin:objText.value.length;
}

//--></script>

</head>

<body>

<form name="f">
    <input type="text" name="t1" size="9" onkeypress="resizeMe(this);" />
</form>

</body>
</html>


normally i would definitely say to use CSS - but this could be more complicated depending on your font family and the user's browser. different fonts are different widths, so it would be more difficult using css widths.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Thanks cLFlaVA. This is for text field width. I'm looking for textbox height, i.e. set the rows. I think the function would be similar but I'm rather daft.

I'm initally calculating in vbs the rows by counting the chars and dividing it by the cols, adding in a set of spaces equal to the col value for each linebreak.

Code: 
Function fnTextAreaHeight(a,b)	
	arrbreaks = SPLIT(a,Chr(13))
	IF isArray(arrbreaks) THEN
		breaks = UBOUND(arrbreaks) + 1
	ELSE 
		breaks = 0
	END IF
	textlength 	= LEN(a)
	textlength 	= textlength + (breaks*b)
	areawidth	= b
	areaheight = textlength/areawidth
	areaheight = areaheight 
	areaheight = INT(areaheight) + 1
	fnTextAreaHeight = areaheight
End Function

<textarea name="eai" cols="50" rows="<% = fnTextAreaHeight(request("eai"),80) %>" id="eai" style="margin-top: 10px;" onkeypress="resizeMe(this);"><% = request("eai") %>
  </textarea>

 
Upvote 0 Downvote
so in other words you meant text area, not text box.

try this:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>auto-expand textarea</title>

<script language="javascript" type="text/javascript">
<!--

function expandTA(ta) {
    var l = ta.value.split('\n').length;
    ta.rows = l;
}

onload = expandTA;

-->
</script>

</head>

<body>

<form name="the_form">
  <textarea name="ta" rows="5" cols="50" onkeyup="expandTA(this);" wrap="off">Here is sample text.</textarea>

</form>

</body>

</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
I did find this on the web, but it doesn't seem to be happy.
Code: 
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
 if (a[x].length >= t.cols) b+= Math.ceil(a[x].length/t.cols);
 }
b+= a.length;
if (b > t.rows && agt.indexOf('opera') == -1) t.rows = b;
}
 
Upvote 0 Downvote
You rock more than anything in the history or all things that rock. Thanks.
 
Upvote 0 Downvote
haha!

just a note: from the code you pasted there - i see they tried to handle for opera. so i tested it in opera, and the textbox ;) is completely collapsed. what you may want to do as a quick and dirty fix is, in my code, change this line to stuff in red:

Code: 
function expandTA(ta) {
    [red]ta.rows = ta.value.split('\n').length + 1;[/red]
}

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Yeah, but did it work at all in IE? It didn't for me in IE6.x. I'm not worried about Opera anyways; this is for an internal IE environment.

Curious...
Is there a way to handle softwrap in the textarea? Everything is cool when you split at \n, but get nasty scrollbars when the line tries to softwrap (which is why you set it to wrap="off", I'm guessing. See html). Could you calculate the needed rows by dividing the length by the colwidth and adding colwidth*1 for each \n? Similar to how I did the vbs function?

Also curious...do the chickens have sharp talons?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
textarea {
	border:none;
	overflow: auto;

}
fieldset {
padding: 10px 10px 10px 10px; 
}
-->
</style>
<script type="text/javascript"><!--


function expandTA(ta) {
    var l = ta.value.split('\n').length;
    ta.rows = l;
}

onload = expandTA;

//--></script>
<link href="../css/issue_tracker.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<h1>Confirm Changes</h1>
<p>Please confirm changes and make any necessary editions. </p>
<form action="issue_added.asp" method="post" name="frm">
<fieldset><legend>Issue Description</legend>  <textarea name="eai" cols="80" rows="8" id="eai"  onkeyup="expandTA(this);" wrap="on">dfghdfghdfghf 
dfghdfgh 
gfhd 

hgf
 df
ghdfgh
  </textarea></fieldset>
  <fieldset><legend>Evidence Areas Impacted</legend>  <textarea id="i_issue_description" name="i_issue_description" cols="80" rows=""  onkeyup="expandTA(this);" wrap="on">gfhdfgh
</textarea></fieldset>

  <fieldset><legend>Company Areas Impacted</legend>  <textarea name="cai" cols="80" rows="8" id="cai" onkeyup="expandTA(this);" wrap="on">d
dfgh
dfg 

fdgh 
gf
hdfgh
</textarea></fieldset>
  <fieldset><legend>Options</legend>  <textarea name="options" cols="80" rows="2" id="options"  onkeyup="expandTA(this);" wrap="on">dfgh fd 
</textarea></fieldset>
  <fieldset><legend>Pros</legend>  <textarea name="pros" cols="80" rows="2" id="pros"  onkeyup="expandTA(this);" wrap="on"> gfdhfdghfd
</textarea></fieldset>
  <fieldset><legend>Cons</legend>  <textarea name="cons" cols="80" rows="2" id="cons"  onkeyup="expandTA(this);" wrap="on">dfgh
</textarea></fieldset>
  <fieldset><legend>Proposed Decision</legend>  <textarea name="i_proposed_resolution" cols="80" rows="2"  onkeyup="expandTA(this);" wrap="on">dfghd 
</textarea></fieldset>
<input name="Submit" type="submit" value="Submit" />
</form>
</body>
</html>
 
Upvote 0 Downvote
worked perfectly for me in IE 6.0.2800:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>auto-expand textarea</title>

<script language="javascript" type="text/javascript">
<!--

function expandTA(ta) {
    ta.rows = ta.value.split('\n').length + 1;
}

onload = function() { expandTA(document.forms['the_form'].elements['ta']); }

-->
</script>

</head>

<body>

<form name="the_form">
  <textarea name="ta" rows="5" cols="50" onkeyup="expandTA(this);" wrap="off">Here is sample 

text.</textarea>
</form>

</body>

</html>



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Weird. Didn't work for me at all in 6.0.3x. I meant the other code, not yours. Yours is happy in IE :)

I'm still initally setting the rowcount using the vbs function, so it is all cool onload (which is what I guess you were accommodating). However, at runtime when typing in the textarea, typing more than 80 characters before a carriage return sort of breaks the dynamic rowcount. Everything is cool if you hit a carriage return <80 characters. This would be problematic for paragraphs.

Odd...I also notice js error onload: Line 23: value is null or not an object: var l = ta.value.split('\n').length+2; Is this happening if there is no \n instring, i.e. derived rowcount is Null?
 
Upvote 0 Downvote
i copied/pasted your code and was unable to produce that error. are you using a Mac or PC?

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
PC IE 6.0.3x. Don't get it in Firefox.

Checked in 6.0.2 too. Same error. Does't seem to affect functionality. Ahhh...goes away if I comment out onload = function() { expandTA(document.forms['frm'].elements['ta']); } I didn't specify ta, that's why. I'm using other names for the fields.

Any thoughts on the soft wrapping? That's my only burning issue.
 
Upvote 0 Downvote
new and improved function:

Code: 
function expandTA(ta) {
    var maxChars = ta.cols;
    var theRows = ta.value.split("\n");
    var numNewRows = 0;
    
    for ( var i = 0; i < theRows.length; i++ ) {
        numNewRows += ( Math.ceil( theRows[i].length / maxChars ) - 1 );
    }
    ta.rows = numNewRows + theRows.length;
}

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
I didn't think it was possible to rock any more than you previously rocked.

I caught you a delicious bass.

Thanks.

t.
 
Upvote 0 Downvote
kinda quirky in firefox... i'll take a look when i get some time.



your mom goes to college.



*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude
[banghead]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
338
lexer
lexer
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
337
AbidingDude
AbidingDude
damipera
  • Locked
  • Question
A TextBox Should Be Filled In 1
Replies
4
Views
294
damipera
damipera
dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
191
dannyo12
dannyo12
Marine1969
  • Locked
  • Question
Ajax textbox and value
Replies
4
Views
334
Marine1969
Marine1969

Part and Inventory Search

Sponsor

Back
Top