SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: Expand textarea

  1. #1
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 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

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    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.

  3. #3
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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

  4. #4
    SitePoint Wizard
    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.
    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.

  5. #5
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote 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.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  6. #6
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  7. #7
    SitePoint Evangelist pip's Avatar
    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.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    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>

  9. #9
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote 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?
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  10. #10
    SitePoint Evangelist pip's Avatar
    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.

  11. #11
    SitePoint Evangelist pip's Avatar
    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;
    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>
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  12. #12
    SitePoint Wizard stereofrog's Avatar
    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>

  13. #13
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanx a lot for ur replies.... Itz working fine in Moz, IE, Netscape... But it doesnt work in Opera....

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    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

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    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 now

  16. #16
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 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

  17. #17
    SitePoint Enthusiast
    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.

  18. #18
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote 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>
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  19. #19
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  20. #20
    SitePoint Evangelist pip's Avatar
    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.

  21. #21
    SitePoint Zealot contactnaveen's Avatar
    Join Date
    Oct 2004
    Location
    India
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Itz working now.... No horizontal scroll bar...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •