CODEWITHSUNDEEP
javascriptjqueryhtmlcsstextarea
Rohit Sharma
Rohit Sharma

Reputation: 103

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

Upvotes: 0

Views: 2954

Answers (2)

Kaken Bok
Kaken Bok

Reputation: 3395

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;

Upvotes: 0

Drake
Drake

Reputation: 3891

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.

Upvotes: 2

Related Questions