12 / 11 / 8
Регистрация: 16.04.2012
Сообщений: 913
1

Textarea по размеру содержимого

04.04.2016, 14:01. Показов 6185. Ответов 7
Метки нет (Все метки)

Всем привет.
Имеется textarea. Надо сделать так, чтобы при вводе текста, высота textarea подстраивалась под размер содержимого. Я пробовал вот так:
Javascript
1
2
textarea.onfocus = function(){this.style.height = this.scrollHeight+"px"};
textarea.oninput = function(){this.style.height = this.scrollHeight+"px"};
Интересное дело: при событии onFocus textarea, действительно, растягивается до нужных размеров. Но при событии onInput ведёт себя странно: при вводе каждого символа, и даже backspace, она увеличивается, вроде на 1px. Что я делаю не так?
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.04.2016, 14:01
Ответы с готовыми решениями:

Перенос по словам в Label'е или установка размера TextBox'а по размеру содержимого
Мне нужно организовать некий контрол на форме, такой, чтобы в него динамически заносилась строка, и...

Сохранение содержимого textarea в файл
Здравствуйте! Как сохранить содержимое поля textarea в файл, при нажатие кнопки?

Перенос содержимого php-переменной в textarea
Перенос содержимого php-переменной $post_text. в textarea: <script...

При добавлении поля <textarea> во всех предыдущих <textarea> все стирается
&lt;body&gt; &lt;input type=&quot;button&quot; value=&quot;Add note&quot; onclick=&quot;add('notes',0)&quot;&gt; &lt;div id=&quot;notes&quot;&gt; ...

7
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
04.04.2016, 14:39 2
ChildOfFlowers, увеличивайте не пиксели, а html-атрибут rows

Добавлено через 4 минуты
И добавьте условие, которое будет проверять появился ли скролл после каждого тыка на клавишу и если появился, то увеличивайте значение атрибута rows на 1. Или, как альтернативный вариант, при каждом тыке на клавишу уменьшайте количество столбцов (только не само значение атрибута cols) и при достижении 0 или, скажем 2-5, добавляйте строку.
P.S. Может есть и лучше способы, но мне пока ничего другого в голову не приходит.
0
12 / 11 / 8
Регистрация: 16.04.2012
Сообщений: 913
05.04.2016, 19:05  [ТС] 3
Цитата Сообщение от romchiksoad Посмотреть сообщение
добавьте условие, которое будет проверять появился ли скролл после каждого тыка на клавишу
При увеличении текста этот вариант сработает. А при уменьшении текста как сделать тогда, чтобы textarea уменьшалась?
Со вторым вариантом что-то вообще не понял, что к чему...
И почему мой вариант не работает? Ведь по логике должен вроде...
0
1954 / 793 / 89
Регистрация: 03.11.2009
Сообщений: 3,066
Записей в блоге: 2
05.04.2016, 20:11 4
Цитата Сообщение от ChildOfFlowers Посмотреть сообщение
И почему мой вариант не работает? Ведь по логике должен вроде...
Он и работает. При любом изменении добавляет пиксель в высоту textarea, все как Вы ему и приказали. Для справки: oninput
Цитата Сообщение от ChildOfFlowers Посмотреть сообщение
Со вторым вариантом что-то вообще не понял, что к чему...
Во втором варианте метод заключается в подсчете введенных в строку символов. К примеру, длина строки - атрибут <textarea cols="40"> - записывается в переменную-счетчик и при каждом добавлении символа в строку (можно событие keypress + проверить код клавиши нажатой, что бы выяснить является ли она видимым символом или символом переноса строки) она (переменная-счетчик) уменьшается (а при удалении снова увеличивается) и при достижении какого-то числа (можно при 0, а можно и при 2-5) символов до конца строки изменяется атрибут cols на текущее значение cols+1. Или всегда добавлять новую строку при переходе на предпоследнюю строку. Кстати, неплохо было бы добавить какое-то ограничение на общее количество строк. И еще, Вы не смотрели как это реализовано на других сайтах/веб-приложениях?
0
Superposition
949 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
05.04.2016, 20:47 5
ChildOfFlowers,

Javascript
1
2
3
function textAreaAdjust(that) {
    that.style.height = that.scrollHeight+"px";
}
HTML5
1
<textarea oninput="textAreaAdjust(this)" style="overflow:hidden"></textarea>
0
12 / 11 / 8
Регистрация: 16.04.2012
Сообщений: 913
07.04.2016, 20:13  [ТС] 6
Padimanskas, и чем ваш вариант отличается от моего?
0
супермизантроп
Эксперт JS
3870 / 2944 / 685
Регистрация: 18.04.2012
Сообщений: 8,563
08.04.2016, 13:03 7
http://htmlweb.ru/java/example... tarea2.php
1
12 / 11 / 8
Регистрация: 16.04.2012
Сообщений: 913
14.04.2016, 13:43  [ТС] 8
kalabuni, это уже кое-что. Но у моей textarea ширина задана 100%. Видимо, в связи с этим, при вводе текста, через определённое количество символов, всё равно добавляется ненужная строка. Я не очень понял, что за вычисления производит эта функция, возможно, в ней можно что-то поменять, чтобы заработало нормально...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.04.2016, 13:43

Как оставить textarea со стилями :focus, когда сама textarea не активна, но текст введен?
Подобное можно наблюдать Вконтакте. По умолчанию в поле видно только &quot;Что нового?&quot;, при фокусе поле...

получение данных из textarea, их обработка и занесение в другой textarea
Добрый день! Нужна помощь по проблеме Есть html страница &lt;html&gt; &lt;body&gt; &lt;form...

php+mysql+textarea выполняется код в textarea
Здравствуйте проблема вот в чём Я вывожу в printf код &lt;textarea name=&quot;text&quot;...

Запрет на изменение окна <textarea></textarea>
Как поставить запрет на изменение окна &lt;textarea&gt;&lt;/textarea&gt;?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.