Expand textarea width imported text from database with jQuery

Question

I have made it so my textarea is autogrowing and autoshrinking with a script I found here on Stackoverflow. This is working great. My problem however is, that when data is imported from my database, the textarea does not fit the content. If I have 50 lines in my database and importing it to my textarea, it only show 2 lines - where I wan't to be able to see all 50.

Script:

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

https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — Ravi Chauhan, Oct 14 '17 at 06:51
@RaviChauhan The autoresize is working just fine. The thing is, that when I fetch text from the database, the textarea keeps the same size. — Niels Hermann, Oct 14 '17 at 06:54
have you tried to manually trigger the event once the page loads? My guess is that you are sending the db data within the page so the events you defined are not triggering since "focus" and "input" require from user interaction to actually work. — Mark E, Oct 14 '17 at 07:06
@MarkE - Yes. If I type something in the textarea it expands like expected. The thing is that I have this comment-system like facebook, where you can comment on a lot of posts. When you have posted it, I want to be able to edit it. I'm doing this with AJAX and everything is working fine except of the expand when imported from the database. How can I solve this - any ideas? — Niels Hermann, Oct 14 '17 at 07:10
@Morten manually trigger the event on ajax success, just after adding the new text. It could look something like `$(".autoExpand").trigger("input.textarea")` — Mark E, Oct 14 '17 at 07:17
@MarkE - Awesome Mark! Thank you very much! Worked like a charm. — Niels Hermann, Oct 14 '17 at 07:21

score 1 · Accepted Answer · answered Oct 14 '17 at 07:28

The script you are using updates the element when an event is triggered. Programmatically changing the content of the element wouldn't trigger the event so you have to trigger it manually. You can do this with the trigger function like this:

 $(".autoExpand").trigger("input.textarea")

score 0 · Answer 2 · answered Oct 14 '17 at 06:54

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>

Expand textarea width imported text from database with jQuery

2 Answers2