刷新div的內容

Question

我目前正在創建一個網站，管理員可以在其中進入“編輯器”模式，從而允許他們在網站上的任何位置編輯任何文本。

在更新文本模塊的表單中，我有一個<textarea> 。

（由於 PHP 回聲，以這種方式格式化）

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

我在那里有一個腳本，所以當我輸入文本區域時，它會動態擴展以匹配內容。

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

這完美地工作，但錯誤是，當我加載頁面時，所有文本區域默認顯示為 1 行。 我知道rows = '1'已設置，但我需要它，因為 1 row'd 元素下面會有不必要的空間。 如果我 select 模塊然后輸入它，它們會捕捉到正確的行。 但我希望這是自動的，因為模塊自動假設它們的動態高度。

為此，我假設我需要以某種方式刷新 textarea。 我嘗試使用.append()向其中添加文本，然后在頁面加載后將其刪除，從而刷新文本區域，但我無法讓它正常工作。

理想情況下，我想讓它默認為第二個版本。 可能嗎？

 $('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>

在頁面加載時：

輸入句號后：

Answer 1

您可以嘗試使用這樣的代碼更改頁面加載時文本區域的高度。

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

Answer 2

此代碼選擇頁面上的每個文本區域並將框包裝到內容中。 完美解決方案位於： https://stackoverflow.com/a/13085718/5451731

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