Изменение размера текстовой области в зависимости от длины содержимого [дубликата]

На этот вопрос уже есть ответ здесь:

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

Мне нужна текстовая область, где я набираю свой текст в поле, он увеличивается по мере необходимости, чтобы избежать необходимости иметь дело с полосами прокрутки, и его необходимо уменьшить после удаления текста! Я не хотел идти по пути mootools или jquery, потому что у меня легкая форма.

 annakata15 июн. 2009 г., 11:39
Растет в X или Y? (и то, и другое не имеет особого смысла)
 Martin Dawson03 дек. 2017 г., 01:09
Я создал пакет для этого, если вы используете реагировать:npmjs.com/package/react-fluid-textarea
 erenon15 июн. 2009 г., 11:23
JQuery также легкий. Не изобретайте weel ... По крайней мере, проверьте решение jQuery и попробуйте скопировать его.
 Sander Versluys15 июн. 2009 г., 12:41
Кстати, ТАК следует использовать один из этих методов для комментариев :-)

Ответы на вопрос(9)

сколько символов может содержать одна строка, а затем для каждой нажатой клавиши вы вызываете функцию, которая выглядит примерно так:

function changeHeight()
{
var chars_per_row = 100;
var pixles_per_row = 16;
this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px';
}

Не проверял код.

 Pawka15 июн. 2009 г., 11:28
Это будет работать правильно, только если шрифт моноширинный. Кроме того, у textarea нет свойства value.
 annakata15 июн. 2009 г., 11:32
это также сломало бы, если бы размер шрифта не был 16px
 Ivar15 июн. 2009 г., 13:54
Код не проверен и, конечно, может быть улучшен. И да, значение текстовой области - это содержимое внутри <textarea> и </ textarea>.
 billyswong15 июн. 2009 г., 12:37
Это не будет работать, когда пользователь вводит текстовую область
 James15 июн. 2009 г., 11:54
Pawka - textareas имеют свойство DOM 'value'.

но сделал это после небольшой модификации:

function textAreaAdjust(o) {
    o.style.height = "1px";
    setTimeout(function() {
        o.style.height = (o.scrollHeight)+"px";
    }, 1);
}

Надеюсь, это поможет кому-то

 Ethan17 мая 2017 г., 03:58
Конечно, это отличное решение ... если вы хотите стробировать текстовую область каждый раз, когда пользователь нажимает клавишу. : V
 davesmiths17 мая 2017 г., 13:30
Это помогло решить мою проблему в то время. Сегодня я, вероятно, использовал бы решение jQuery Джекмура, данное в ответе Равималли.

Вы также можете попробоватьcontenteditable приписать к нормальномуp или жеdiv, Не совсемtextarea но он будет автоматически изменять размер без скрипта.

<!DOCTYPE html>
<style>
.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}
</style>

<div class="divtext" contentEditable>Hello World</div>
 Ernests Karlsons05 окт. 2011 г., 18:14
это, однако, добавит весь мусор HTML при вставке.
 Michael18 дек. 2015 г., 02:25
Отличное решение! Одно улучшение, чтобы сделать его более похожим на текстовое поле: я бы добавил курсор на наведенное поле.divtext:hover { cursor:text; }, В моем случае я также изменил.divtext:focus Класс для изменения цвета фона при фокусировке текстового поля.
 user66967723 сент. 2014 г., 13:12
Это решение прекрасно, если textarea только для чтения. (В этом случае contentEditable можно опустить) Я бы также добавилwhite-space: pre; установка.
 Dave Jarvis31 дек. 2013 г., 22:27
Посмотрите этот ответ, чтобы убрать мусор HTML:stackoverflow.com/a/20384452/59087
 pcnate04 февр. 2019 г., 17:45
до сих пор работает в 19 году с угловым 7 и ngx-подсветкой<pre><code contentEditable [textContent]="sqlContent"></code></pre>

    <textarea style="overflow: visible" />
 annakata15 июн. 2009 г., 11:31
это не работает и textarea должен иметь закрывающий тег
 logan11 янв. 2016 г., 17:54
@BobbyShaftoe Неверно, согласностандарт w3: «Элемент textarea должен иметь начальный и конечный теги». Для ясности :)
 Walter Rumsby14 окт. 2009 г., 04:38
Из того, что я могу сказать, это работает только в Internet Explorer, когда страница отображается в режиме причуд.
 BobbyShaftoe15 июн. 2009 г., 12:32
На самом деле, это закрыто, если вы немного более внимательно следите за своей XML-литературой. Хотя XHTML-1.0-Strict может не поддерживать минимизированный синтаксис для текстовой области; не уверен в этом. Что касается не работает: у меня работает.
 Alsciende15 июн. 2009 г., 13:59
Он не работает под Firefox, Safari, Chrome или Opera. Так что это, вероятно, не очень хорошее решение, хотя оно идеально, если вы ориентируетесь только на Internet Explorer.

переменная ширина шрифты, особенно в JavaScript.

Единственный способ, которым я могу думать, - это создать скрытый элемент с переменной шириной, установленной css, поместить текст в его innerHTML и получить ширину этого элемента. Таким образом, вы можете использовать этот метод для решения проблемы автоматического определения размера текстовой области.

Вы должны обновлять диапазон с текстом в textarea каждый раз, когда текст изменяется. Затем установите ширину и высоту текстовой области css для свойств clientWidth и clientHeight диапазона.

Например:

.textArea {
    border: #a9a9a9 1px solid;
    overflow: hidden;
    width:  expression( document.getElementById("spnHidden").clientWidth );
    height: expression( document.getElementById("spnHidden").clientHeight );
}
 Andrei03 дек. 2012 г., 10:50
CSS-выражения устарелиstackoverflow.com/a/6191696/179581

а исходный код доступен на github по адресу:https://github.com/jackmoore/autosize .

 Kim Homann22 мая 2018 г., 16:55
Где именно??
 Kim Homann01 июн. 2018 г., 08:45
Он не регулирует высоту при изменении ширины с помощью нижнего правого угла.
 Ravimallya26 мая 2018 г., 07:35
 Ravimallya02 июн. 2018 г., 07:25
Опубликуйте вопрос там, а не отрицайте ответ. Я не автор этого плагина, чтобы проверить или исправить проблему.
Решение Вопроса

1px а затем читатьscrollHeight свойство:

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (25+o.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Работает под Firefox 3, IE 7, Safari, Opera и Chrome.

 Quentin Engles01 мая 2014 г., 05:10
Это имеет проблему, когда текстовое поле становится выше, чем порт просмотра. В том случае, когда текстовая область растет, она становится нервной. В остальном довольно мило.
 Alsciende15 июн. 2009 г., 14:27
В Firefox есть проблема, если ваш пользователь вводит очень длинное слово (без пробелов, больше, чем текстовая область), тогда «overflow: hidden» не позволит ей увидеть правый конец слова. Другим браузерам это безразлично, так как они будут ломаться даже без пробелов. Вы можете исправить это, используя вместо этого «overflow-y: hidden», но тогда ваш css не соответствует стандартам.
 Denilson Sá Maia20 сент. 2012 г., 21:04
Это очень похожий ответ:stackoverflow.com/a/5346855/124946 Если мы установимheight='auto' прямо перед установкойscrollHeightзатем он работает, как и ожидалось, сокращаясь по мере необходимости.
 Alsciende15 июн. 2009 г., 14:33
Что касается проблемы Firefox, она может быть решена в ближайшее время:stackoverflow.com/questions/47817/...
 Jens03 июл. 2012 г., 03:56
Если у вас текстовая область слишком высокая и генерирует прокрутку на страницеа также если вам прокручивают страницу вниз, это приведет к сбросу позиции прокрутки вверх, когда вы 'height = 1px'. Чтобы избежать этого, вы можете временно назначить высоту родителю текстовой области.

Используйте эту функцию:

function adjustHeight(el){
    el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}

Используйте этот HTML:

<textarea onkeyup="adjustHeight(this)"></textarea>

И, наконец, используйте этот CSS:

textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}

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

 Dale08 янв. 2016 г., 04:37
я знаю, что это старый пост, но когда я печатаю текстовую область, если весь контент не помещается на первой странице, весь контекст переходит на вторую страницу и создает нежелательные пробелы на первой странице. Как я могу разделить текстовую область на две страницы при печати?

Ваш ответ на вопрос