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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
/>
<title>Expandin g Textbox</title>
<script src="scriptacul ous/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=$('descri ption-ghost');
var content=Form.El ement.getValue( el);
content = content.replace ( /\ \ /g, " &nbs p;" ) ;
content = content.replace ( /\ \ /g, " &nbs p;" ) ;
ghost.innerHTML =content;
ghost.style.dis play='block'
var h=Element.getHe ight(ghost);
ghost.style.dis play='none'
if(h>10) el.style.height =h+"px"
}
</script>
<textarea id="description " onkeyup="checkH eight(this);"></textarea>
<div id="descriptio n-ghost"
style="display: none;font-size:14px;font-family:Lucida Grande, Arial,
Helvetica, sans-serif"></div>
</body>
</html>
in********@gmai l.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.ro und(Form.Elemen t.getValue(el). length/30);
el.rows=(newrow s>0) ? newrows : 1;
}
</script>
<textarea style="font-size:14px;font-family:Lucida Grande, Arial,
Helvetica, sans-serif" id="description " rows="1" cols="30"
onkeydown="chec kHeight(this);" ></textarea>
<input type="button" onclick="checkH eight($('descri ption'))"
value="test" />
I just wish there was a way to get the scrollheight of the text(rather
than the height of the textbox)
