textarea resize CSS

В углу текстового поля, созданного с помощью тега textarea можно заметить треугольник, который позволяет изменять его размер пользователю самостоятельно. Реализуется это благодаря свойству CSS resize, которое может принимать следующие значения:


С помощью max-width и max-height или min-width и min-height указывается максимально возможная ширина/высота изменения элемента.
При совместном использовании с overflow, resize может быть задано и для других тегов.
<pre style="resize: both; width: 230px; overflow: auto;">код</pre>

Тег textarea.

А теперь немного подробнее о теге textarea.

placeholder устанавливает всплывающую подсказку, которая исчезнет при щелчке


Выделение содержимого внутри textarea.

Изменяем стиль выделения Кнопка вне поля
Кнопка вне формы

textarea с шириной width 100%.

Для того, чтобы поле не выходило за границы блока, нужно прописать свойства

Как убрать скрол у textarea в ИЕ.

Если посмотреть в IE, то везде у тега textarea будет вертикальный скроллинг. Чтобы его убрать применяем overflow: auto;.

Удалить рамку во время фокуса в Хроме.

Показать/скрыть текст по щелчку

в f t
наверх ↑

24 комментария:

Евгения
Отличная статья, спасибо.
Nomad
Я буквально два дня назад столкнулся с терминами div id=scroll
div dir=ltr,и был уверен что только ими можно создать бокс со скроллом будь то слева или или справа, оставалось добраться до resize - а он у вас...
Здравствуйте,Наталья!
Ваш блог я часто посещаю ввиду очень полезного содержания.Спасибо вам!
NMitra
Здравствуйте! Слова "очень полезного содержания" греют душу.
Nomad
На самом деле мне стоило сказать больше.
У окон с этой страницы необычные свойства - они редактируются,как будто они в редакторе,это нормально?
NMitra
Да, я просто не стала запрещать изменение (readonly). При обновлении страницы всё встаёт на свои места.
Светлана Ковалева
Кое-что из этого пригодилось. Спасибо, Наталья, за хороший материал!
Светлана Ковалева
У меня появился вопрос. Подскажите, пожалуйста, Наталья, наверняка вы знаете, как добавить ссылку или кнопку, при нажатии на которую происходило бы копирование в буфер обмена содержимого внутри textarea?
NMitra
Да, есть такая, но известный мне скрипт работает не во всех браузерах, поэтому я не стала его публиковать.
Светлана Ковалева
Понятно. Спасибо за ответ!
Якушевская Юлия Сергеевна
Добрый вечер. Спасибо за полезный и нужный материал. Немного знала и пользовалась, но ваш сайт - это просто находка!!! :)
Анонимный
А в 7-ом Эксплорере НЕ работает
NMitra
Да, не все новинки успевает подхватить этот браузер. В 10 версии будет лучше.
Анонимный
Показать/скрыть текст по щелчку в IE 7 - не пашет, видимо по причине разных !DOCTYPE
NMitra
Честно говоря, не скажу поддерживается ли там :focus
Анонимный
Супер
Анонимный
Здравствуйте!
Можно у Вас спросить.
Как сделать чтобы написанное в textarea. Также отображалось и в iframe.
Например.
У Вас
Очень хороший сайт
Много интересного и полезного.
Спасибо
ВАМ!
А то там всё в кучу получается.
NMitra
Здравствуйте,
http://shpargalkablog.ru/2014/10/window-open-javascript.html#popup а именно contentWindow (это чтобы изменить страницу, которая в iframe)
есть ещё у iframe атрибут srcdoc, при наличии которого игнорируется src

<iframe srcdoc="<p>Привет</p>"></iframe>
NMitra
Эм, если вас интересуют переносы строк, то элементу в iframe нужно задать стиль
white-space: pre-wrap;
или \n заменить на <br>
.replace(/\n/gi, '<br>')
Анонимный
Спасибо Вам, как всегда гора интересного.
Но разве всё так сложно. Или может я не так объяснил.
Вот что мне надо.
Я написал в textarea
СПАСИБО
ВАМ!!!
И после нажатия кнопки с помощью ПХП у меня всё идёт в iframe. Тут же на странице.
Но проблема в том что в iframe. Это выглядит так.
СПАСИБО ВАМ!!!
То есть одно строка, вместо двух.
И ещё из textarea можно отослать как либо нажатием клавише Enter. Или только, как я искал только при помощи
NMitra
Вам нужно \n заменить на <br>
В php тоже есть функция регулярных выражений, как replace
Анонимный
С клавише Enter. Нашёл более менее приемлемое решение без
JavaScript. Просто Таbом выводим фокус из textarea и жмём Enter.
Но очень важно чтобы кнопка тогда в списке формы была именно под textarea. На экране всё равно где. Тогда фокус из textarea будет при первом нажатии Таb именно на кнопке. Но если вам надо при втором нажатии тогда кнопка 2 после textarea
Но про это чёто не получается.
11111111111111111
2222222222222222
А не
1111111111111222222222222
Анонимный
О Вы уже написали пока я думал. Ясно понял. Теперь всё думаю получиться.
Спасибо Вам за ответы и за такой замечательный сайт!!
Анонимный
Можно несколько уголков сделать "пятнистыми" для изменения размера.
NMitra
Только с помощью :before и :after самому добавлять небольшие иконки