By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,650 Members | 1,996 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,650 IT Pros & Developers. It's quick & easy.

Expanding Textbox

P: n/a
Is there a way to make an autosized textbox relative to the content,
here is my attempt:
<script type="text/javascript">
function checkHeight(el){
var newrows=Math.round(Form.Element.getValue(el).lengt h/30);
el.rows=(newrows>0) ? newrows : 1;
}
</script>
<textarea style="font-size:14px;font-family:Lucida Grande, Arial,
Helvetica, sans-serif" id="description" rows="1" cols="30"
onkeydown="checkHeight(this);"></textarea>
<input type="button" onclick="checkHeight($('description'))"
value="test" />
I just wish there was a way to get the scrollheight of the text(rather
than the height of the textbox)

Dec 3 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Here is another shot at it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
/>
<title>Expanding Textbox</title>
<script src="scriptaculous/prototype.js"
type="text/javascript"></script>
<style type="text/css" media="screen">
#description, #description-ghost{
font-size:14px;
font-family:Lucida Grande, Arial, Helvetica, sans-serif;
width:300px;
padding:4px;

}
#description-ghost{
width:280px;
}
</style>

</head>

<body>
<script type="text/javascript">
function checkHeight(el){
var ghost=$('description-ghost');
var content=Form.Element.getValue(el);

content = content.replace ( /\ \ /g, "&nbsp;&nbsp;" ) ;
content = content.replace ( /\&nbsp;\ /g, "&nbsp;&nbsp;" ) ;
ghost.innerHTML=content;
ghost.style.display='block'

var h=Element.getHeight(ghost);
ghost.style.display='none'
if(h>10) el.style.height=h+"px"

}
</script>
<textarea id="description" onkeyup="checkHeight(this);"></textarea>
<div id="description-ghost"
style="display:none;font-size:14px;font-family:Lucida Grande, Arial,
Helvetica, sans-serif"></div>
</body>
</html>

in********@gmail.com wrote:
Is there a way to make an autosized textbox relative to the content,
here is my attempt:
<script type="text/javascript">
function checkHeight(el){
var newrows=Math.round(Form.Element.getValue(el).lengt h/30);
el.rows=(newrows>0) ? newrows : 1;
}
</script>
<textarea style="font-size:14px;font-family:Lucida Grande, Arial,
Helvetica, sans-serif" id="description" rows="1" cols="30"
onkeydown="checkHeight(this);"></textarea>
<input type="button" onclick="checkHeight($('description'))"
value="test" />
I just wish there was a way to get the scrollheight of the text(rather
than the height of the textbox)


Dec 5 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.