Refresh Contents of Div

Question

I'm currently creating a site where admins are able to enter an "editor" mode, thus allowing them to edit any text anywhere on the website.

In the form to update a text module, I have a <textarea> .

(formatted this way due to PHP echo)

<textarea oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"' rows='1'id ='".$phrase."' name='". $phrase ."'>".$query."</textarea>

I have a script in there that makes it so when I type in the textarea, it dynamically expands to match the content.

oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'

This works perfectly, but the error is, when I load a page, all textarea's appear at default as 1 row. I know that rows = '1' is set, but I need it to be, as 1 row'd elements will have unnecessary space underneath. They snap to their correct rows if I select the module then type in it. But I would like for this to be automatic, for the module's to automatically assume their dynamic height.

For this, I assume I need to refresh the textarea somehow. I've attempted to use .append() to add text to it then remove it AFTER the page loads, thus refreshing the textarea, but I couldn't quite get it to work.

Ideally, I'd like to make it default to the second version. Is it possible?

 $('textarea').on('keydown', function(event) { if (event.keyCode == 13){ if (.event.shiftKey) { event;preventDefault(). this.form;submit(). $('#selector');submit(); } } }). // THIS IS THE ANSWER $("textarea"),each( function( i. el ) { $(el).height( el;scrollHeight ); });

 textarea.submitFunc { overflow: hidden; margin: inherit;important: outline; inherit:important; background: inherit;important: color; inherit:important; resize: none; text-transform: inherit;important: text-align; inherit:important; font-family: inherit;important: font-weight; inherit:important; padding: inherit;important: display; block: line-height; inherit.important: font-size: inherit;important: vertical-align; bottom; float: inherit !important; min-height: 30px; } textarea.submitFunc:focus { border: 1px solid black; resize: both; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea class='submitFunc' oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' id ='selector' name='selector'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dignissim neque, quis varius lacus. Proin molestie quam eget velit tristique, sed facilisis orci auctor. Phasellus tincidunt nisl a sem egestas facilisis a ut elit. Proin molestie elit vel justo semper, nec luctus est pellentesque. Nam felis felis, fermentum id quam eu, suscipit lobortis justo. Cras ac est dignissim, hendrerit odio nec, vehicula sem. Curabitur mattis dolor elementum eros lobortis placerat. In hac habitasse platea dictumst.</textarea>

On page-load:

After typing a period:

Answer 1

You can try to change the height of the textarea on page load using code like this.

(() => {
    const element = document.querySelector("#id-of-the-textarea");
    element.style.height = element.scrollHeight + "px";
})();

Answer 2

This code selects every textarea on the page and wraps the box to the content. Perfect solution found over at: https://stackoverflow.com/a/13085718/5451731

$("textarea").each( function( i, el ) {
    $(el).height( el.scrollHeight );
});