height of textarea increases when value increased but does not reduce when value is decreased

Question

<body>
<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){var h=$(this);
h.height(h[0].scrollHeight);
});});

</script>
<textarea style="resize:none;width:760px;height:60px; overflow:hidden;" ></textarea>
</body>

When textarea get overflowed it get scrollbar and scrollheight which gets applied to its height but not working for decreasing textarea height as on decreasing its value length it doesnot get scrollbar

what is this script trying to accomplish? – jbabey May 23 '12 at 14:46 — jbabey, May 23 '12 at 14:46
the title should say it all ... @jbabey – Val May 23 '12 at 14:47 — Val, May 23 '12 at 14:47

score 25 · Accepted Answer · 2012-05-23T17:58:59.407

25

The minimum scrollHeight of a textarea is always going to be the height. To get an accurate scrollHeight, set the height to 1 first.

h.height(1).height(h[0].scrollHeight);

http://jsfiddle.net/aarongloege/t2vAr/

edited May 23 '12 at 17:58

answered May 23 '12 at 14:48

god damn you made my answer look silly :) good answer, btw you should put the js fiddle example on your answer so incase that url expires in the future. – Val May 23 '12 at 14:52
Good work , you can set height at first with any value doesn't matter – Sameh Serag May 23 '12 at 14:54
Man, you saved my life! Been the whole day trying to solve this issue. – Carlos Augusto Grispan Apr 18 '19 at 00:33
Needs to be adjusted since .live is deprecated but it does in fact work when you just make it .on instead. Thank you so much! – Pinpaho Mar 25 '20 at 20:16
Is this JQuery? What would a pure javascript solution look like? – Labrador May 05 '20 at 10:27
@Labrador I added an answer to this page with the code you're looking for. – live627 Jul 25 '22 at 19:55

score 0 · Answer 2 · answered May 23 '12 at 15:00

0

If you do not want to code it by yourself, you can also use this script: https://github.com/brandonaaron/jquery-expandable It already contains a nice slide-effect ;-)

answered May 23 '12 at 15:00

Christopher

2,005
3
24
50

score 0 · Answer 3 · answered Jul 25 '22 at 19:49

0

Pure JavaScript version of the above code

textarea.style.height = '0';
textarea.style.height = textarea.scrollHeight + 'px';

answered Jul 25 '22 at 19:49

live627

397
4
18

height of textarea increases when value increased but does not reduce when value is decreased

3 Answers3

Linked