CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3784251
user3784251

Reputation: 520

trouble in entering text in dynamically changing textarea

I'm not so sure of how to ask my question. Actually i'm having a textarea and a button, if i click the button it will show some text in the textarea and then user need to type some more text to it. I like to have a dynamic textarea (ie, the height of the textarea will change based on the content entered) so i coded for it.

My code works fine. But while the user entering some text, they can't see the exact line where they are typing.

This problem occurs only when the textarea is near the end of the screen.(Unfortunately i need to have my textarea there. so here i have given some <br> tag to move the textarea to the end of the screen)

Here is the DEMO

And my code comes here:

<script>
function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
    $("#text").focus();
}
function click1()
{

    document.getElementById('text').value="Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network,[5][6] created in 2008 by Jeff Atwood and Joel Spolsky,[7][8] as a more open alternative to earlier Q&A sites such as Experts Exchange. The name for the website was chosen by voting in April 2008 by readers of Coding Horror, Atwood's popular programming blog.[9]";
    textAreaAdjust(document.getElementById('text'));
    $("#text").focus();
}
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" id="text"></textarea>
<input type="button" onClick="click1()">
</body>
</html>

Any suggestion please.

Upvotes: 0

Views: 52

Answers (2)

slashsharp
slashsharp

Reputation: 2833

I have updated your fiddle

I added

$(window).scrollTop($('#text').height() + $('#text').offset().top);

Basically to scroll to the bottom of your textarea position.

Upvotes: 2

nanndoj
nanndoj

Reputation: 6770

you can put the textarea at the end of the screen using css

 textarea { 
    position: absolute,
    bottom: 0px;
    left: 0px;
 }

I have updated your Fiddle:

Upvotes: 1

Related Questions