Autosize a textarea without focus

Question

Currently I have the following code for autosizing my textarea:

$('textarea').bind('input propertychange', function() {
    $(this).height(50).height(Math.min(370, this.scrollHeight));
});

This works fine while I am in the textarea and change the text by pressing some keys.

What I need is a possibility to do the same when setting the text of the area by JavaScript and while the textarea is not focused. Only executing the same code in the callback (ofcourse with right scope) doesn't works - height gets zero.

maybe related to http://stackoverflow.com/questions/2988660/propertychange-event-is-not-available-in-firefox — Blag, Nov 17 '15 at 13:06

goupil · Answer 1 · 2015-11-17T16:41:17.407

0

You may try to trigger the event

$('textarea').on('input propertychange', function() {
    $(this).height(50).height(Math.min(370, this.scrollHeight));
});
$('textarea').trigger('propertychange');

//If you change textarea content with html() or append you could try something like that $('textarea').html(somecontent); $('textarea').height($('textarea').scrollHeight);

edited Nov 17 '15 at 16:41

answered Nov 17 '15 at 13:07

goupil

175
10

Yes, now the height isn't zero anymore but still not high enough. – tyurd Nov 17 '15 at 13:33
how do you change the text into the textarea? – goupil Nov 17 '15 at 14:41
$('textarea').html('some content'); or .append('some more content'); – tyurd Nov 17 '15 at 15:33

score 0 · Answer 2 · answered Nov 17 '15 at 13:09

0

after executing your callback function fire the propertychange function

$('textarea').trigger('propertychange');

answered Nov 17 '15 at 13:09

Azad

5,144
4
28
56

score 0 · Answer 3 · answered Nov 17 '15 at 13:14

with a change and a trigger

$("#i").on('change', function(){
  this.style.color = 'red';
  });
function f(){
  $('#i').trigger('change');
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" value="hello" /><br>
<button onclick="f()">Run</button>

score 0 · Answer 4 · answered Nov 17 '15 at 13:46

my jquery solution is :

$(document).ready(function(){
    $("textarea").each(function(){
        $(this).height(($(this)[0].scrollHeight) + "px");
    });
    $("textarea").keypress(function(){
        $(this).height(($(this)[0].scrollHeight) + "px");
    });
})

JSFiddle

Autosize a textarea without focus

4 Answers4