can we change the size of text area at run time

Question

I am working on a phonegap project. Here i want to scroll Text area so try with overflow:auto; but it not worked on device android. Now I want to change the Height of the text area when user write the text more than the area height or simply when user enter 4 or 5 line than the height of the text area changing according to the user requirement and i fixed the height of the div which is above the text area and when the height of the text area is more than the height of the div than the div is scroll.

Here is the link: http://jsfiddle.net/amnishyadav/NUhBf/

<div class="mydiv">
    <textarea class="textdiv">
    </textarea>
</div>

score 0 · Answer 1 · answered Oct 28 '13 at 07:39

0

use javascript

document.getElementById("myTextarea").rows=10;

answered Oct 28 '13 at 07:39

srutheesh

34
1
5

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

When you remove the height property from mydiv and add jQuery mobile, jQuery mobile will take care of resizing the textarea, see JSFiddle

Update:

You can extract the code from jQuery mobile, which is responsible for growing the textarea. When you look into jQuery mobile 1.3.2 and search for textarea, you will see

// Autogrow
if ( input.is( "textarea" ) ) {
    ...
}

when you adapt this code to your situation, you will get something like this JSFiddle

Update 2:

There's no need to descend into jQuery mobile source. Searching Stackoverflow (and finding of course) gives this marvelous answer Textarea to resize based on content length. When you adapt the jQuery mobile solution, you will get

function textareaChanged(input) {
    input.style.height = "1px";
    input.style.height = (extraLineHeight+input.scrollHeight)+"px";
};

$('.textdiv').on("keyup change input paste", function () {
    ...
    var input = this;
    ...
});

See modified JSFiddle

edited May 23 '17 at 12:10

Community

1
1

answered Oct 28 '13 at 08:37

Olaf Dietsche

72,253
8
102
198

yes you are right but i can't use jquery mobile in my project if u have other option than please tell me – user2075328 Oct 28 '13 at 11:13
Please see updated answer. This is just modifying open source code. – Olaf Dietsche Oct 28 '13 at 16:36
Thank Olaf Dietsche it is working when we write on textarea but when we delete word from textarea than the height of textarea is not change. Can we decries the height of text area when we delete the the world form textarea. – user2075328 Oct 29 '13 at 04:12
I don't know of any property giving the text height. Maybe this question http://stackoverflow.com/q/454202/1741542 helps. – Olaf Dietsche Oct 29 '13 at 07:06

score 0 · Answer 3 · answered Oct 28 '13 at 08:37

<div class="mydiv">
    <textarea id='textarea1' class="textdiv">
    </textarea>
</div>

<script>
    document.getElementById("textarea1").style.width="500px";
    document.getElementById("textarea1").style.height="500px";
</script>

you can do it this way

can we change the size of text area at run time

3 Answers3