Set textarea height to match filled data

Question

So I am working on some text area and I dont want scroll bars. I have figured out how to make the the textarea grow as a user inputs new information with the following:

$('.step-change__text').on 'keyup keydown', ->
        resize(this);
        return
resize = (element) ->
    element.style.height = element.scrollHeight + 'px'
    return

What Im having trouble finding (cause the searches all lead to the answer above) is users can edit records that are pre-filled with text and I want the text area to be expanded with the text that is already saved.

EDIT: I tried to just do it on page load with this code:

$('.step-change__text').each ->
        resize(this)
        return

But that didnt do it

Then all you have to do is exactly the same thing ... only not triggered by a key press, but when the content is inserted into the textarea. (So that might be on page load already ... or later on, if you do this filling of the textarea with the saved value dynamically.) — CBroe, Aug 17 '17 at 12:34
right after your function definition, you can add a simple call to that function `resize($('.step-change__text'))` and it will update the size at page load. Also, this post might help you for complete and browser compatible version: https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — MrYoshiji, Aug 17 '17 at 12:41

score 0 · Answer 1 · answered Aug 17 '17 at 12:42

As @CBroe already mentioned. All you have to do is trigger the function not only on key-events but also on content changes. Try this code:

$('.step-change__text').on 'input keyup keydown', ->
        resize(this);
        return
resize = (element) ->
    element.style.height = element.scrollHeight + 'px'
    return

Set textarea height to match filled data

1 Answers1