Как сделать чтобы textarea не растягивался
Обновлено: 05.07.2024
В углу текстового поля, созданного с помощью тега textarea можно заметить треугольник, который позволяет изменять его размер пользователю самостоятельно. Реализуется это благодаря свойству CSS resize, которое может принимать следующие значения:
С помощью max-width и max-height или min-width и min-height указывается максимально возможная ширина/высота изменения элемента.
Тег textarea.
placeholder устанавливает всплывающую подсказку, которая исчезнет при щелчке ">
Выделение содержимого внутри textarea.
Кнопка вне поля
Кнопка вне формы
textarea с шириной width 100%.
Как убрать скрол у textarea в ИЕ.
Если посмотреть в IE, то везде у тега textarea будет вертикальный скроллинг. Чтобы его убрать применяем overflow: auto;.
Удалить рамку во время фокуса в Хроме.
Показать/скрыть текст по щелчку
24 комментария:
NMitra Эм, если вас интересуют переносы строк, то элементу в iframe нужно задать стиль
white-space: pre-wrap;
или \n заменить на
.replace(/\n/gi, '
') Анонимный Спасибо Вам, как всегда гора интересного.
Но разве всё так сложно. Или может я не так объяснил.
Вот что мне надо.
Я написал в textarea
СПАСИБО
ВАМ.
И после нажатия кнопки с помощью ПХП у меня всё идёт в iframe. Тут же на странице.
Но проблема в том что в iframe. Это выглядит так.
СПАСИБО ВАМ.
То есть одно строка, вместо двух.
И ещё из textarea можно отослать как либо нажатием клавише Enter. Или только, как я искал только при помощи
NMitra Вам нужно \n заменить на
В php тоже есть функция регулярных выражений, как replace Анонимный С клавише Enter. Нашёл более менее приемлемое решение без
JavaScript. Просто Таbом выводим фокус из textarea и жмём Enter.
Но очень важно чтобы кнопка тогда в списке формы была именно под textarea. На экране всё равно где. Тогда фокус из textarea будет при первом нажатии Таb именно на кнопке. Но если вам надо при втором нажатии тогда кнопка 2 после textarea
Но про это чёто не получается.
11111111111111111
2222222222222222
А не
1111111111111222222222222
Анонимный О Вы уже написали пока я думал. Ясно понял. Теперь всё думаю получиться.
Спасибо Вам за ответы и за такой замечательный сайт!!
Анонимный Можно несколько уголков сделать "пятнистыми" для изменения размера. NMitra Только с помощью :before и :after самому добавлять небольшие иконки
Речь в этой заметкек пойдет о стандартном элементе TEXTAREA и о свойствах, которые можно ему придать:
- Как отключить стандартную подсветку TEXTAREA и INPUT в браузерах на WebKit (например, Safari и Google Chrome).
- Как сделать собственную подсветку выделяемого поля TEXTAREA.
- Как отключить "растягиваемость" поля TEXTAREA (наиболее актуально для браузеров с движком WebKit).
- Как сделать так, чтобы поле TEXTAREA вытягивалось вниз автоматически под размер набираемого текста.
Решение этих задач очень простое:
1. Для отключения автоматического подсвечиваиня полей TEXTAREA и INPUT в браузерах Google Chrome, Safari нужно задать следующий стиль:
2. Для создания собственного варианта подсветки поля TEXTAREA можно задать следующие стили:
Для полей INPUT решение аналогично.
3. Чтобы текстовое поле TEXTAREA не растягивалось до произвольных размеров (если пользователь растягивает его за нижний правый угол), нужно задать CSS-стиль:
На этом проблема будет решена. Все поля TEXTAREA перестанут растягиваться.
4. Для того, чтобы поле TEXTAREA растягивалось вниз автоматически в процессе набора текста, можно воспользоваться jQuery-плагином "jQuery Autosize". Использование плагина очень простое. Теперь любое поле TEXTAREA на странице будет подстраивать свою высоту под размер помещенного в него текста.
Для правильной работы должны быть подключены скрипты jQuery и плагина jQuery Autosize.
Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.
Размеры textarea
Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).
Или указывать размер в CSS свойствах:
В первом случае мы точно знаем, сколько символов поместится в форме, во втором случае будет проблема, так как иногда буквы будут обрезаны.
Замещающий текст в HTML5
Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.
Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.
Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.
Как убрать свечение у textarea?
Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:
Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.
Как удалить маркер изменения размера у textarea?
Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:
Nowrap — убрать переносы
Как убрать полосу прокрутки textarea в Internet Explorer?
IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.
Проблема
Прежде чем кидаться решать проблему — ее нужно осознать. С чего бы начать? Все зависит от поставленной вам задачи. Например: если требуется, чтобы инпут расширялся в ширину — это одна проблема. Если нужно чтобы он рос в высоту — это проблема другая. А если нужно чтобы сразу во все стороны, тут можно начинать страдать, дело-то непростое.
Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.
Варианты решения
Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.
Следующий вариант не назовешь слишком изящным, но работающий вот что важно. Основан на том, что где-то позади самого текстового поля мы прячем невидимый блок, куда дублируем содержимое текстового поля при любом изменении. Блок изменяет свои размеры по содержимому, мы вычисляем их с помощью ява-скрипта и присваиваем текстовому полю. Если вас не смущает дополнительный мусор на странице в виде такого вот костыля — смело можно брать на вооружение.
Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.
Выбираем правильный инпут
Прежде всего, понадобится заменить input на textarea. Поскольку инпуты бесполезно наращивать в высоту, лучше сразу возьмем многострочное поле и будем делать вид, что это однострочный инпут.
Добавляем немного стилей, чтобы замаскировать истинную сущность нашего текстового поля.
Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.
box-sizing: border-box
В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.
height и min-height (width и min-width)
Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.
Немного теории
Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.
А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.
Немного vanilla JS-практики
Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input
Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:
Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.
Результат
Вот такие поля получились. Несложно и недолго.
Адаптивный инпут, растущий в высоту:
Адаптивный инпут, растущий в ширину:
Angular Директива
Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:
Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.
Пример использования:
Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.
В остальном, все, о чем говорили, плюс — настраиваемый параметр horizontal указывающий что тянуть, ширину или высоту. Выбирайте нужный вариант и ни в чем не отказывайте своему дизайнеру.
Читайте также: