Refre sh Содержание Div

Question

В настоящее время я создаю сайт, на котором администраторы могут войти в режим «редактора», что позволяет им редактировать любой текст в любом месте на веб-сайте.

В форме для обновления текстового модуля я есть <textarea>.

(отформатирован таким образом из-за PHP echo)

<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 строкой будут иметь ненужное пространство внизу. Они привязываются к своим правильным строкам, если я выбираю модуль и набираю его. Но я бы хотел, чтобы это было автоматически c, чтобы модуль автоматически принимал их динамику c высоту.

Для этого, я полагаю, мне нужно как-то обновить sh текстовое поле. Я попытался использовать .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>

При загрузке страницы:

After typing a period:

введите описание изображения здесь

Answer 1

Этот код выбирает каждое текстовое поле на странице и обертывает поле вокруг содержимого. Идеальное решение можно найти по адресу: { ссылка }

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

Answer 2

Вы можете попробовать изменить высоту текстового поля при загрузке страницы с помощью такого кода.

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