SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
Thread: Expand textarea
-
Nov 29, 2004, 06:57 #1
Expand textarea
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
-
Nov 29, 2004, 10:14 #2
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Nov 29, 2004, 22:26 #3
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
-
Nov 30, 2004, 01:47 #4
- Join Date
- Mar 2001
- Posts
- 3,537
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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.
-
Nov 30, 2004, 02:24 #5
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by 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.Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Nov 30, 2004, 02:28 #6
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by contactnaveen
e.g. textareaObj.style.height = textareaObj.style.height + 1;
try this.Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Nov 30, 2004, 02:43 #7
- Join Date
- Jun 2001
- Location
- Cape Town, South Africa
- Posts
- 548
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
- Pip
---------------------------------------------------------------------------------
Nothing takes the taste out of peanut butter quite like unrequited love.
-
Nov 30, 2004, 02:54 #8
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
Cross-Browser.com, Home of the X Library
-
Nov 30, 2004, 03:20 #9
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by pip
can u please paste the code here?Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Nov 30, 2004, 03:40 #10
- Join Date
- Jun 2001
- Location
- Cape Town, South Africa
- Posts
- 548
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sure thing... give me a sec
- Pip
---------------------------------------------------------------------------------
Nothing takes the taste out of peanut butter quite like unrequited love.
-
Nov 30, 2004, 04:00 #11
- Join Date
- Jun 2001
- Location
- Cape Town, South Africa
- Posts
- 548
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
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>
- Pip
---------------------------------------------------------------------------------
Nothing takes the taste out of peanut butter quite like unrequited love.
-
Nov 30, 2004, 04:41 #12
- Join Date
- Apr 2004
- Location
- germany
- Posts
- 4,324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Nov 30, 2004, 05:14 #13
Thanx a lot for ur replies.... Itz working fine in Moz, IE, Netscape... But it doesnt work in Opera....
-
Nov 30, 2004, 10:08 #14
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Which one "doesn't work in Opera"? Mine does. There were three different examples posted. Obviously we all thought this was an interesting challenge
Cross-Browser.com, Home of the X Library
-
Nov 30, 2004, 10:42 #15
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 nowCross-Browser.com, Home of the X Library
-
Nov 30, 2004, 22:34 #16
Try this itz working fine..
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
-
Dec 1, 2004, 01:26 #17
- Join Date
- Sep 2004
- Location
- california, usa
- Posts
- 50
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Dec 1, 2004, 02:31 #18
- Join Date
- Jun 2004
- Location
- Mumbai, India
- Posts
- 541
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by ac070
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>
Vikrant Korde
S Y S T I M E, Mhape,
Mumbai, Maharashtra, India.
-
Dec 1, 2004, 03:27 #19
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
-
Dec 1, 2004, 04:02 #20
- Join Date
- Jun 2001
- Location
- Cape Town, South Africa
- Posts
- 548
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
overflow-x: auto; overflow-y: auto;
Does that not work?- Pip
---------------------------------------------------------------------------------
Nothing takes the taste out of peanut butter quite like unrequited love.
-
Dec 1, 2004, 04:07 #21
Itz working now.... No horizontal scroll bar...
Bookmarks