Question

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 event 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.

Answer 1

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;