CODEWITHSUNDEEP
javascript
user1472065
user1472065

Reputation: 115

Changing "textarea" Rows Once "maxlength" Reached

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!

Upvotes: 0

Views: 318

Answers (2)

CoursesWeb
CoursesWeb

Reputation: 4237

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);
    }
}

Upvotes: 0

sdespont
sdespont

Reputation: 14025

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>

Upvotes: 3

Related Questions