Как можно сделать такую textarea, чтобы ее высота автоматически адаптировалась без необходимости ввода текста с клавиатуры, а текст добавлялся с помощью JavaScript?

Question

CosmicEnigma

javascript

Как можно сделать такую textarea, чтобы ее высота автоматически адаптировалась без необходимости ввода текста с клавиатуры, а текст добавлялся с помощью JavaScript?

Добрый день! <br/> <br/> Я столкнулся с ситуацией, когда все предлагаемые методы изменения высоты textarea зависят от ввода текста вручную. Однако в моем случае текст добавляется в поле по клику из другого JavaScript-кода, и высота textarea при этом не подстраивается. <br/> <br/> Объем текста всегда варьируется.

5 апреля 2025 г. 11:14

Ответы на вопрос 2

Похожие вопросы

Answer 1

Добрый день!

Для того чтобы textarea автоматически адаптировалась под высоту текста, добавляемого через JavaScript, можно использовать следующий подход:

1. **Используйте `scrollHeight`**: При добавлении текста вы можете установить высоту textarea, равную её полному содержимому.

2. **Создайте функцию для обновления высоты**: Создайте функцию, которая будет изменять высоту textarea в зависимости от содержимого.

Вот пример кода, который демонстрирует этот подход:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Автоматическая высота textarea</title>
    <style>
        textarea {
            width: 100%;
            overflow: hidden; /* Скрываем скроллы */
            resize: none;    /* Запрет на изменение размера */
        }
    </style>
</head>
<body>

<textarea id="myTextarea" placeholder="Начните вводить текст..."></textarea>
<button id="addText">Добавить текст</button>

<script>
    const textarea = document.getElementById('myTextarea');
    const addTextButton = document.getElementById('addText');

    function updateTextareaHeight() {
        textarea.style.height = 'auto'; // Сброс высоты
        textarea.style.height = textarea.scrollHeight + 'px'; // Установка высоты в зависимости от содержимого
    }

    addTextButton.addEventListener('click', () => {
        // Добавляем текст в textarea
        textarea.value += "Это новый текст!\n";
        
        // Обновляем высоту textarea
        updateTextareaHeight();
    });

    // Если нужно, вы можете вызвать updateTextareaHeight() после загрузки страницы
    window.onload = updateTextareaHeight;

</script>

</body>
</html>
```

### Объяснение кода:
- Мы задаем высоту textarea в `'auto'` перед тем, как установить её `scrollHeight`. Это необходимо для того, чтобы текст внутри элемента при добавлении не создавал лишних пустых пространств.
- Вызывается `updateTextareaHeight()` каждый раз после добавления текста, чтобы обновить высоту textarea в зависимости от содержимого.
- Визуально мы отключаем возможность изменения размера по осям, чтобы элементы выглядели аккуратно. 

Теперь каждый раз, когда вы добавляете текст через кнопку, высота textarea будет обновляться автоматически, в зависимости от добавленного текста.

Answer 2

Что-то типо такого не подходит? 
 
 <textarea id="myTextarea" rows="1" style="overflow:hidden; resize:none;"></textarea>
<button onclick="insertText()">Вставить текст</button>
 
 
 function autoResizeTextarea(textarea) {
  textarea.style.height = 'auto'; // сброс высоты
  textarea.style.height = textarea.scrollHeight + 'px'; // установка по контенту
}

function insertText() {
  const textarea = document.getElementById('myTextarea');
  textarea.value = 'Это текст, вставленный скриптом. Он может быть длинным и занимать несколько строк.';
  autoResizeTextarea(textarea);
}