textarea size increase via javascript

JavaScript:

function x() {
    var value = document.getElementById("test1").value.length;
    if (value <= 18) {
        value.rows = 1;
    } else if (value > 18 && value < 36) {
        value.rows = 2;
    } else if (value > 36 && value < 54) {
        value.rows = 3;
    }
}

HTML:

<input type="textarea" id="test1" style="overflow:auto" rows="1" cols="18" onkeypress="javascript:x();">

3 questions:

1. How can I remove these if-else via for or while loop?
2. Max size of the field should be 18 but right now it doesnt work exact at 18 even though I made cols="18".
3. Is "onkeypress" the best option? I use the eve开发者_运维技巧nt to delete the value inside a textbox either use delete or backspace which are not part of "keypress". So basically it doesn't dynamically decrease the rows.

Textarea is the tag not an attribute value

<textarea id="test1" style="overflow:auto" rows="1" cols="18">Text goes here</textarea>

For the javascript you are assigning the length to the variable, not the element. So kinda like

var a = document.getElementById("test1");

a.rows = (a.value.length / 18) + 1;

This is untested code.

Only to 1)

First you need to set the row to the test1 object not to the value:

document.getElementById("test1").rows = xxx;

Then you did skip the handling for the values of 36 and 54. This should be probably <= 36 and <= 54.

Then this:

var textarea = document.getElementById("test1")

if (value == 0) textarea.rows = 1;
else if (value > 54) textarea.rows = 3;
else textarea.rows = Math.floor((value - 1) / 18) + 1;