Automatically extending textarea

[carllucas]

I wish to create a textarea which will extend its height according to how many lines there in it so that one won't need to scroll. To do this I have created a textarea thus:

<textarea id="myText" cols=10 rows=1 wrap="hard" style="overflow-y:hidden; width:50%; height:25px;" onKeyUp="wordWrap()"></textarea>
 

Everytime the user type in the textarea it calls the function 'wordWrap()' which detects the number of lines in the textarea and adjusts the height accordingling:

var height = 25;
function wordWrap()
  {
    n = editArea.value.split(/\n/).length;
    height = n*15;
    editArea.style.height = (height+10)+'px';
    window.status = n;
  }
 

The problem I have is that this function will only calculate the line created by the user pressing ENTER and not lines created by automatic (hard) wrap (which to my knowledge inserts carriage returns automatically where the lines break).

How can I detect all newlines/line breaks/carriage returns in my textarea? Has anyone done something like this before. I've scoured the internet for a solution without luck.

Netvibes.com have manage to get this to work almost perfect. But I've noticed a little glitch when u write a word that is too long.

[iam_clint]

hmm have you tried splitting it by line feed instead of carriage return? which would be \n if i am not mistaking

[carllucas]

I believe that is what I'm doing with:

n = myText.value.sp lit(/\n/).length;

Or do you mean something else?

[iam_clint]

I believe that is what I'm doing with:

n = myText.value.sp lit(/\n/).length;

Or do you mean something else?

I can't remember how word wrap works exactly if it adds a line feed and carriage return, drawing blanks right now will try to figure it out and post later with some help.

[eilering]

in visual studio I use
<asp:textbox id="txttxtarea " runat="server" TextMode="Multi Line" Height="0px" >txtarea</asp:textbox>
This creates a textarea with auto height

[rnd me]

the wraps inserted by the browser do not affect the content of the textarea, they can't, less the mess up form submitting.

you can increase the rows propery of the textarea instead, and that will prevent the line breaks, and thus give you an accurate estimation of the needed height.

[Inny]

try this, give your textarea a unique id such as [id='txt4']

 
<script type='text/javascript'>
window.onload = function()
{
  txtOnTimeout();
}
function txtOnTimeout()
{
  var t4 = document.getElementById('txt4');
  if (t4.value.length > t4.rows * t4.cols) {
    ++t4.rows;
  }  
  setTimeout('txtOnTimeout()', 500);
}
</script>

[mrhoo]

This works pretty well, but when the textarea gets bigger than the window you will have to scroll the window. And make sure none of the textarea's ancestors has an absolute height style property, or they will get the scroll bar.

Run.rerow= function(e){
    e= window.event || e;
    var T= e.target || e.srcElement;
    while(T.scrollHeight>T.offsetHeight){
        T.rows= parseInt(T.getAttribute('rows'))+2;
        T.focus();
    }
}

// test
var T= document.getEle mentsByTagName( 'textarea')[0];
T.onkeypress= Run.rerow;