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, " " ) ;
content = content.replace ( /\ \ /g, " " ) ;
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)
