javascript - Force resizement when reading text from file

Question

The duplicate suggested is the question where I got the basis for this question, so it is not a duplicate! As a matter of fact, I already have linked to that question from the start...

---

GOOD EDIT:

I made a JSFiddle ( my first time :) ). Notice how the textarea does not expand as one would wish. Type something inside the textarea and it will get resized immediately.

If we can automatically send a keypress event, it may work... (this relevant question did not help, the answers had no effect).

---

I am using the textarea as is from here. Then, I read from a file and I am putting the content inside the textbox, but it doesn't get resized as it should.

I update the textbox like this:

function updateTextbox(text) {
  $('#cagetextbox').val(text);
};

Any ideas?

I am on firefox 34.0 canonical, at Ubuntu 12.04, if that plays some role, which I hope is not the case, since some of my users use Chrome.

---

EDIT:

An attempt would be to write something like this:

$('#cagetextbox').attr("rows", how many rows does the new text contain);

Note that if we try to find out how many lines of text the textarea contains, we will get 1 as an answer.

---

EDIT_2

Maybe something like width/(length_of_line * font_size). For a few tests, it seems to be correct, if I subtracted 1 (by keeping only the integer part of the result of course).

Answer 1

Your textArea didn't update the height itself even when you trigger the 'input.textarea' on it because this value is undefined:

this.baseScrollHeight

It's only defined after a 'focus' on the textarea.

I have modified your code a little bit: http://jsfiddle.net/n1c41ejb/4/

so, on 'input'

    $(document).on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this);
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

and move the baseScrollHeight calculation to a separate function

function calcBaseScrollHeight(textArea) {
    var savedValue = textArea.value,
        baseScrollHeight;
    textArea.value = '';
    baseScrollHeight = textArea.scrollHeight;
    textArea.value = savedValue;
    return baseScrollHeight;
}

then call your updateTextBox like this:

$('#cagetextbox').val(text).trigger('input.textarea');