Changing "textarea" Rows Once "maxlength" Reached

Question

I am trying to make a textarea where there is a set maxlength and it is held on one row. Once the maxlength is reached, the textareas attributes need to be targeted so the maxlength is doubled and another row is added.

To see if this could work I tried it just to add an extra row and forty more characters. Here is my code...

<!DOCTYPE html>
<HEAD>
<TITLE>Cool Text Form</TITLE>
</HEAD>
<script language="javascript" type="text/javascript">
function newline()
{
    x = document.getElementById("notesfield").length;
    if (x >= 40)
        document.getElementById("notesfield").rows="2";
        document.getElementById("notesfield").maxlength="80";
}
</script>
<textarea id="notesfield" maxlength="40" rows="1" onkeyup="newline()" class="notes">Notes go here.</textarea>

The problem is, this code does not work. I have tried it and once the maxlength is reached, nothing happens. Also, there were no errors in the javascript console of chrome. Can anyone help me get this working or point me in the right direction?

Thanks!

score 3 · Answer 1 · answered Jun 01 '13 at 18:00

3

http://jsfiddle.net/UQTY2/119/

Not sure about what you are trying to do, but use document.getElementById("notesfield").value.length to check the text length and you have forgotten brakets

<!DOCTYPE html>
<HEAD>
<TITLE>Cool Text Form</TITLE>
</HEAD>
<script language="javascript" type="text/javascript">
function newline()
{
    x = document.getElementById("notesfield").value.length;
    if (x >= 40)
    {
        document.getElementById("notesfield").rows="2";
        document.getElementById("notesfield").maxlength="80";
    }
}
</script>
<textarea id="notesfield" maxlength="40" rows="1" onkeyup="newline()" class="notes">Notes go here.</textarea>

answered Jun 01 '13 at 18:00

sdespont

13,915
9
56
97

+1 for pointing that out. But `.rows` is wrong in the first place. – Jun 01 '13 at 18:02
2

I think this should really be how it should be done: http://jsbin.com/ehusuj/1/ Don't use inline functions (onkeyup attribute), use setAttribute and you probably want to use === instead of >=. – chrisbuchholz Jun 01 '13 at 18:06
Oh ok! so now that everything else is fixed, what is the proper way to use rows? – user1472065 Jun 01 '13 at 18:07
Looks like I spaced. That is the right way, or at least it should work. setAttribute would work too though. – Jun 01 '13 at 18:08
Although this isn't a good way to do this. Some characters are longer than others. You won't have the best auto-resizing you could. Here's a previous question with some really good info http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize – Jun 01 '13 at 18:11

score 0 · Answer 2 · answered Jun 01 '13 at 18:10

Try use setAttribute() to change the 'rows' and 'maxlength' attributes value.

function newline() {
  var  x = document.getElementById("notesfield").value.length;
    if (x >= 40) {
        document.getElementById("notesfield").setAttribute('rows', 2);
        document.getElementById("notesfield").setAttribute('maxlength', 80);
    }
}

Changing "textarea" Rows Once "maxlength" Reached

2 Answers2