Expanding Textbox

interfaced · Dec 3, 2005

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).length/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)

interfaced · Dec 5, 2005

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>

Issue with textbox script?	0	Sep 5, 2022
Need help with code on website (noob)	2	Jul 18, 2022
Help with my responsive home page	2	Dec 14, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Centering a button using flexbox	2	Feb 5, 2023
Help me sort out this script	1	Oct 17, 2023
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023

Expanding Textbox

interfaced

interfaced

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads