Создание текстовой области с автоизменяет размер

Вы используете более высокое значение текущего clientHeight и содержания scrollHeight. При создании scrollHeight меньшего путем удаления содержания расчетная область не может стать меньшей, потому что clientHeight, ранее установленный style.height, содержит его открытый. Вы могли вместо этого взять макс. () scrollHeight и минимального значения высоты, которое Вы предопределили или вычислили от textarea.rows.

В целом Вы, вероятно, не должны действительно полагаться на scrollHeight на средствах управления формой. Кроме scrollHeight, традиционно менее широко поддерживаемого, чем некоторые из других расширений IE, HTML/CSS ничего не говорит о том, как средства управления формой реализованы внутренне, и Вам не гарантируют, scrollHeight будет чем-либо значимым. (Традиционно некоторые браузеры использовали виджеты ОС для задачи, делая CSS и взаимодействие DOM на их внутренностях невозможными.), По крайней мере, осуществляют сниффинг для существования scrollHeight/clientHeight прежде, чем попытаться включить эффект.

Другой возможный альтернативный подход для предотвращения проблемы, если важно, чтобы это работало более широко, мог бы быть должен использовать скрытое отделение, измерил к той же ширине как текстовая область и установил в том же шрифте. На keyup Вы копируете текст от текстовой области до текстового узла в скрытом отделении (не забывающий заменять '\n' разрывом строки и выходить из '<'; / '&'; правильно, если Вы используете innerHTML). Тогда просто измерение offsetHeight отделения даст Вам высоту, в которой Вы нуждаетесь.

Я создал маленькое (7 КБ) пользовательский элемент , который имеет дело со всей этой логикой изменения размеров для Вас.

Это работает везде, потому что это реализовано как пользовательский элемент. Включая: Виртуальный DOMS (Реагируют, Вяз, и т.д.), серверная сторона представил материал как PHP и простые скучные файлы HTML.

Кроме прислушивания к входному событию, это также имеет таймер, который запускает каждые 100 мс, чтобы удостовериться, что вещи все еще работают в случае, если текстовое содержание изменяется некоторыми другими средствами.

Вот то, как это работает:

// At the top of one of your Javascript files
import "autoheight-textarea";

или включают как тег script

<script src="//cdn.jsdelivr.net/npm/autoheight-textarea@1.0.1/dist/main.min.js"></script>

, затем просто переносят Ваши элементы текстовой области как так

HTML, Компонент Файла

<autoheight-textarea>
  <textarea rows="4" placeholder="Type something"></textarea>
<autoheight-textarea>

React.js

const MyComponent = () => {
  return (
    <autoheight-textarea>
      <textarea rows={4} placeholder="Type something..." />
    </autoheight-textarea>
  );
}

Вот является основной демонстрацией на Codesandbox: https://codesandbox.io/s/unruffled-http-2vm4c

И Вы можете захватить пакет здесь: https://www.npmjs.com/package/autoheight-textarea

, Если Вам просто любопытно видеть логику изменения размеров, можно смотреть на эту функцию: https://github.com/Ahrengot/autoheight-textarea/blob/master/src/index.ts#L74-L85

Я тестировал скрипт в обычных браузерах, и он потерпел неудачу в Chrome и Safari. Это из-за постоянно обновляемой переменной scrollHeight.

Я применил скрипт DisgruntledGoat с помощью jQuery и добавил исправление хрома

function fitToContent(/* JQuery */text, /* Number */maxHeight) {
    var adjustedHeight = text.height();
    var relative_error = parseInt(text.attr('relative_error'));
    if (!maxHeight || maxHeight > adjustedHeight) {
        adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight);
        if (maxHeight)
            adjustedHeight = Math.min(maxHeight, adjustedHeight);
        if ((adjustedHeight - relative_error) > text.height()) {
            text.css('height', (adjustedHeight - relative_error) + "px");
            // chrome fix
            if (text[0].scrollHeight != adjustedHeight) {
                var relative = text[0].scrollHeight - adjustedHeight;
                if (relative_error != relative) {
                    text.attr('relative_error', relative + relative_error);
                }
            }
        }
    }
}

function autoResizeText(/* Number */maxHeight) {
    var resize = function() {
        fitToContent($(this), maxHeight);
    };
    $("textarea").attr('relative_error', 0);
    $("textarea").each(resize);
    $("textarea").keyup(resize).keydown(resize);
}