Expand textarea

**contactnaveen** · Nov 29, 2004, 06:57

I need a javascript to increase the number of rows(dynamically) on typing.

P.S: Like the one in yahoomail. On compose, the To textfield will be one row in length and on typing the rows are added... Very good feature......

Thanx,
Naveen

**vikrantkorde** · Nov 29, 2004, 10:14

Hi Naveen,

try this code.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script>
var Cnt=0;

</script>
</head>

<body>
<a href="javascript:AddFreind();" id="hylkAddFreinds">Add More Freinds</a>
<script>
/*
var newText = document.createTextNode("Four score and seven years ago...")
var newElem = document.createElement("P")
newElem.id = "newestP"
newElem.appendChild(newText)
document.body.appendChild(newElem)
*/
function AddFreind(){
// var divFreinds=document.getElementById('divFreinds');
Cnt=Cnt+1;
var strFreind="<table border='0' cellspacing='0' cellpadding='0' width='100%' align='center'>" + "<tr>" + "<td Class='darkgrey'>Name" + Cnt + "</td>" + "<td><input type='text' id='txtFriendName" + Cnt + "' Class='textBox'></td>" + "<td Class='darkgrey'>Email Address" + Cnt + "</td>" + "<td align='right'><input type='text' id='txtFriendEmail" + Cnt + "' Class='textBox'></td>" + "</tr>" + "</table>";
//document.write(strFreind);
//divFreinds.innerHTML=divFreinds.innerHTML +strFreind;
var newText = document.createTextNode("Four score and seven years ago...");
var newElem = document.createElement("P");
newElem.id = "newestP";
newElem.appendChild(newText);

var newElem1 = document.createElement("input");
newElem1.id = "textP";
newElem1.type = "text";
newElem.appendChild(newElem1);
document.body.appendChild(newElem);
}
</script>
</body>
</html>

Let me know if you have any doubt in this.

**contactnaveen** · Nov 29, 2004, 22:26

Hi vikrantkorde,

Ur solution is working fine... But that is not my requirement..... I want only one textarea with one row visible. and when i click "ENTER" key the rows must be incremented. Like the one in yahoomail... (In yahoomail when u compose mails check the To address field u will understand it clearly)

Thanx
Naveen.V

**7stud** · Nov 30, 2004, 01:47

P.S: Like the one in yahoomail. On compose, the To textfield will be one row in length and on typing the rows are added... Very good feature......
...when i click "ENTER" key the rows must be incremented.

It must not be too great of a feature, since it doesn't work for me with Firefox1.0.

Anyway if you want someone to write a script for you on demand, that usually requires $$$. On the other hand, if you need help with a script you are writing, post it and describe the problems you are having, and I'm sure someone can offer you some advice.

**vikrantkorde** · Nov 30, 2004, 02:24

Originally Posted by 7stud

It must not be too great of a feature, since it doesn't work for me with Firefox1.0.

Anyway if you want someone to write a script for you on demand, that usually requires $$$. On the other hand, if you need help with a script you are writing, post it and describe the problems you are having, and I'm sure someone can offer you some advice.

hi 7stud,

well that code will work for IE for sure and also for netscape with so,e modification.

about firefox 1.0 i am not much familiar with this as far as programming is concern. but i geuss i need to have a look in that also.

**vikrantkorde** · Nov 30, 2004, 02:28

Originally Posted by contactnaveen

Hi vikrantkorde,

Ur solution is working fine... But that is not my requirement..... I want only one textarea with one row visible. and when i click "ENTER" key the rows must be incremented. Like the one in yahoomail... (In yahoomail when u compose mails check the To address field u will understand it clearly)

Thanx
Naveen.V

well i don't remember the page where yahoo is doing like that. to do that what u need to do is u need to trap an event i.e. "enter key" or say the length exceeded 20 chars. u need to call a function which will increase the height of the textarea by 1.

e.g. textareaObj.style.height = textareaObj.style.height + 1;

try this.

**pip** · Nov 30, 2004, 02:43

Well, I tested Yahoo with both IE6 and FireFox 1.0, and it worked on both. I checked the code and created my own script that seems to be working fine.

**MikeFoster** · Nov 30, 2004, 02:54

I had a little demo layin around

but I don't think it works in Moz.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type='text/javascript'>
window.onload = function()
{
  txtOnTimeout();
}
function txtOnTimeout()
{
  var t1 = document.getElementById('txt1');
  if (t1.value.length > t1.rows * t1.cols) {
    ++t1.rows;
  }  
  setTimeout('txtOnTimeout()', 500);
}
</script>
</head>
<body>
<p>A new row is added when the number of
characters is greater than rows * cols.</p>
<form>
<textarea id='txt1' rows='1' cols='30'></textarea>
</form>
</body>
</html>

**vikrantkorde** · Nov 30, 2004, 03:20

Originally Posted by pip

Well, I tested Yahoo with both IE6 and FireFox 1.0, and it worked on both. I checked the code and created my own script that seems to be working fine.

hey pip,

can u please paste the code here?

**pip** · Nov 30, 2004, 03:40

Sure thing... give me a sec

**pip** · Nov 30, 2004, 04:00

Okay... there appears to be one slight issue on FireFox/Moz, which I tried to sort out now without much luck. The TextArea size on IE is initially only 1 line height, but on FF, the field height appears bigger...(aprox 2 lines). It still works though:

Code:

  	function DoUpdateFieldHeight(oEvent) {
  		if (oEvent == null) oEvent = window.event;
  		if (oEvent == null) return;
  		var oTarget = (oEvent.srcElement?oEvent.srcElement:oEvent.target);
  		if (oTarget == null) return;
  		window.setTimeout("UpdateFieldHeight('" + oTarget.id + "')", 10);
  	}
  
  	function InstallFieldUpdater(oField) {
  		if (typeof(oField) == "string") oField = document.getElementById(oField);
  		if (oField == null || oField.tagName != "TEXTAREA") return;
  		
  		if (oField.attachEvent) { // IE
  			oField.attachEvent("onfocus",DoUpdateFieldHeight);
  			oField.attachEvent("onkeyup",DoUpdateFieldHeight);
  			oField.attachEvent("onmouseup",DoUpdateFieldHeight);
  			oField.attachEvent("onselect",DoUpdateFieldHeight);
  			oField.attachEvent("oncut",DoUpdateFieldHeight);
  			oField.attachEvent("onpaste",DoUpdateFieldHeight);
  		} else
  		if (oField.addEventListener) { // Moz/W3
 			oField.addEventListener("focus",DoUpdateFieldHeight, true);
 			oField.addEventListener("keyup",DoUpdateFieldHeight, true);
 			oField.addEventListener("mouseup",DoUpdateFieldHeight, true);
 			oField.addEventListener("select",DoUpdateFieldHeight, true);
  		}
  	}
  	
  	function UpdateFieldHeight(oField, iMaxHeight) {
  		if (typeof(oField) == "string") oField = document.getElementById(oField);
  		if (oField == null || oField.tagName != "TEXTAREA") return;
  		
  		if (oField.value.length == 0) {
 			// mitigate inability to shrink the field on mozilla -- if empty
 			// just delete the custom height and let the css take over
  			oField.style.height = null;
  			return;
  		}
  		
  		if (iMaxHeight == null) iMaxHeight = 200;
  		
  		var iClientHeight = parseInt(oField.clientHeight);
  		var iScrollHeight = parseInt(oField.scrollHeight);
  		
 		if ((Math.abs(iClientHeight - iScrollHeight) > 4) || (iClientHeight < iScrollHeight)) { // second case added to clear up problems where the text area
 			// initializes to slightly smaller than the appropriate height
  			iScrollHeight += 4; // TextArea Frame
  			
 			if ((iMaxHeight != null) && (iScrollHeight > iMaxHeight))
  				iScrollHeight = iMaxHeight;
  			if (iScrollHeight != oField.offsetHeight)
 				oField.style.height = iScrollHeight + "px";
  		}
  	}
  	
  	function Initialize() {
  		InstallFieldUpdater("toField");
  	}
  	
  	function OnLoad() {
  		setTimeout("Initialize()",100);
  	}
  	
  	window.onload = OnLoad;

HTML:

Code:

 <textarea name="To" rows="1" cols="40" style="width: 35em; overflow-y:auto; font-family:sans-serif,monospace; font-size:9pt;" tabindex="1" id="toField" ></textarea>

**stereofrog** · Nov 30, 2004, 04:41

Much, much simpler...

Code:

<textarea id="area" rows=5 cols=20></textarea>
<script>
window.onload = function () {
  setInterval(
          "with(document.getElementById('area'))style.height=scrollHeight", 
          20);
}
</script>

**contactnaveen** · Nov 30, 2004, 05:14

Thanx a lot for ur replies.... Itz working fine in Moz, IE, Netscape... But it doesnt work in Opera....

**MikeFoster** · Nov 30, 2004, 10:08

Which one "doesn't work in Opera"? Mine does. There were three different examples posted. Obviously we all thought this was an interesting challenge

**MikeFoster** · Nov 30, 2004, 10:42

pip, I also had a problem with this in Mozilla (v1.7.2 on Win2K). Does your textarea wordwrap in moz? Mine doesn't, no matter how many rows the textarea has. Also, like you said, my Moz won't render a one-row textarea either (it reserves space for a horizontal scrollbar).

Anyone else have any luck in Mozilla on this ?

Edit:

Ah, I see now. Moz only wordwraps on white-space. Ok, it works in Moz now

**contactnaveen** · Nov 30, 2004, 22:34

Try this code it works fine... No scroll bar...

It is working fine in Moz, Netscape, IE.. but i have some problem in Opera.

<HTML>
<HEAD>
<TITLE>
dynamic textarea growth
</TITLE>

<SCRIPT>
function countLineBreaks (string) {
var re = /\r\n|\r|\n/g;
var n = 0;
while (re.exec(string))
n++;
return n;
}
function adjustRows (textarea) {
if (document.all) {
while (textarea.scrollHeight > textarea.clientHeight)
textarea.rows++;
textarea.scrollTop = 0;
}
else if (textarea.rows) {
var lineBreaks = countLineBreaks(textarea.value);
var rows = parseInt(textarea.rows);
var wrap = textarea.getAttribute('wrap');
if (lineBreaks > rows)
textarea.rows = ++rows;
else if (wrap.toLowerCase() == 'soft' || wrap.toLowerCase() ==
'hard') {
while (textarea.rows * textarea.cols <= textarea.value.length) {
textarea.rows = ++rows;
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA ROWS="5" COLS="20" WRAP="off"
ONKEYUP="adjustRows(this)"
>
1: wrap=off
</TEXTAREA>
<BR>
<TEXTAREA ROWS="5" COLS="20" WRAP="hard"
ONKEYUP="adjustRows(this)"
>
1: wrap=hard
</TEXTAREA>
<BR>
<TEXTAREA ROWS="5" COLS="20" WRAP="soft"
ONKEYUP="adjustRows(this)"
>
1: wrap=soft
</TEXTAREA>
</BODY>
</HTML>

Regards,
Naveen.V

**ac070** · Dec 1, 2004, 01:26

Naveen:
- very interesting code. I tried it. worked in IE and FF.
- one thing I noticed: if I entered the text for more than 5 lines, and
then deleted back to less than 5 lines, the window do not reduced
back to 5 rows.

Thanks.

**vikrantkorde** · Dec 1, 2004, 02:31

Originally Posted by ac070

Naveen:
- very interesting code. I tried it. worked in IE and FF.
- one thing I noticed: if I entered the text for more than 5 lines, and
then deleted back to less than 5 lines, the window do not reduced
back to 5 rows.

Thanks.

Thanks Naveen it really works. here is the small modification i made to shrink the textarea if the meessage is reduced.

Code:

<HTML>
	<HEAD>
		<TITLE>
		dynamic textarea growth
		</TITLE>

		<SCRIPT>
		function countLineBreaks (string) {
			var re = /\r\n|\r|\n/g;
			var n = 0;
			while (re.exec(string))
			n++;
			return n;
		}
		function adjustRows (textarea) {
			if (document.all) {
				while (textarea.scrollHeight > textarea.clientHeight)
					textarea.rows++;
				while ((textarea.scrollHeight < textarea.clientHeight) && (textarea.rows >5))
					textarea.rows--;
				textarea.scrollTop = 0;
			}
			else if (textarea.rows) {
				var lineBreaks = countLineBreaks(textarea.value);
				var rows = parseInt(textarea.rows);
				var wrap = textarea.getAttribute('wrap');
				if (lineBreaks > rows)
					textarea.rows = ++rows;
				else if ((lineBreaks < rows) && (rows > 5))
					textarea.rows = --rows;
				else if (wrap.toLowerCase() == 'soft' || wrap.toLowerCase() =='hard') {
					while (textarea.rows * textarea.cols <= textarea.value.length) {
						textarea.rows = ++rows;
					}
					while ((textarea.rows * textarea.cols >= textarea.value.length) && (rows > 5)){
						textarea.rows = --rows;
					}
				}
			}
		}
		</SCRIPT>
	</HEAD>
	<BODY>
		<TEXTAREA ROWS="5" COLS="20" WRAP="off" ONKEYUP="adjustRows(this)">1: wrap=off</TEXTAREA>
		<BR>
		<TEXTAREA ROWS="5" COLS="20" WRAP="hard" ONKEYUP="adjustRows(this)">1: wrap=hard</TEXTAREA>
		<BR>
		<TEXTAREA ROWS="5" COLS="20" WRAP="soft" ONKEYUP="adjustRows(this)">1: wrap=soft</TEXTAREA>
	</BODY>
</HTML>

**contactnaveen** · Dec 1, 2004, 03:27

Deletion of rows is working fine...

I hav some problem with horizontal scroll bar... I tried to hide the horizontal scroll bar... but i cudnt do that.... Is there any way hiding horizontal bar..

Naveen.V

**pip** · Dec 1, 2004, 04:02

overflow-x: auto; overflow-y: auto;

Does that not work?

**contactnaveen** · Dec 1, 2004, 04:07

Itz working now.... No horizontal scroll bar...

The SitePoint Forums have moved.

User Tag List

Thread: Expand textarea

Thread Tools

Display

Expand textarea

Try this itz working fine..

Bookmarks

Bookmarks

Posting Permissions