Javascript-форум - textarea возможно ли отслеживать в этом блоке изменения

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - textarea возможно ли отслеживать в этом блоке изменения (https://javascript.ru/forum/misc/84634-textarea-vozmozhno-li-otslezhivat-v-ehtom-bloke-izmeneniya.html)

textarea возможно ли отслеживать в этом блоке изменения

Вот я могу сделать нужное количество столбцов и рядов. Но если количество символов будет превышать будет появляться прокрутка.
А как сделать что бы когда идет превышение количество символов скрипт поменял добавил нужно количество рядов

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<textarea name="comment" cols="20" rows="2"></textarea>

<script>
    
</script>

</body>
</html>

Цитата:

Сообщение от Сергей Ракипов

добавил нужно количество рядов

рядов? может строк?

Увеличить - просто: смотришь что scrollHeight больше чем высота самого блока и увеличиваешь её до нужного значения. А вот ужать обратно - это уже извращаться надо.)

рони,
да строк я просто так всегда называл ряды, строк

Aetae,
там же не в пикселях строки в значениях cols="20" rows="2" или можно писать в пикселях

textarea auto height

Сергей Ракипов,
по запросу из инета первые варианты ...

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        textarea {
            resize: none;
            overflow: hidden;
            min-height: 24px;
        }
    </style>
    <script>
        function auto_grow(element) {
            element.style.height = "5px";
            element.style.height = (element.scrollHeight) + "px";
        }
    </script>
</head>

<body>
    <textarea oninput="auto_grow(this)" rows="2"></textarea>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .input-sizer {
            display: inline-grid;
            position: relative;
            border: solid 1px;
        }

        .input-sizer.stacked {
            align-items: stretch;
        }

        .input-sizer.stacked::after,
        .input-sizer.stacked textarea {
            width: auto;
            min-width: 1em;
            grid-area: 1/2;
            font: inherit;
            padding: 0.25em;
            margin: 0;
            resize: none;
            background: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
        }


        .input-sizer::after {
            content: attr(data-value) " ";
            visibility: hidden;
            white-space: pre-wrap;
        }

        .input-sizer:focus-within textarea:focus,
            {
            outline: none;
        }
    </style>
</head>

<body>
    <label class="input-sizer stacked">
        <textarea oninput="this.parentNode.dataset.value = this.value" rows="2" placeholder="hi"></textarea>
</label>
</body>

</html>

рони,
Спасибо я просто не знал как спросить у интернета вообще не подумал что там размер может мерися в пикселях.

Спасибо:)

Все увидел по запросу

textarea auto height