Авторастяжка TextArea, Изменение размера textarea в зависимости от введенного текста


Содержание

Авторастяжка TextArea, Изменение размера textarea в зависимости от введенного текста

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

В этом скрипте интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:

#comment — это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 — максимальное количество строк, до которых будет происходить авторастяжка.
Если содержимое поля станет больше этого количества строк, то появляется прокрутка.
Данное можете подстроить под себя как вам удобно.

Но если поставить так:

то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?


If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5345ff2f8c968e29 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

jQuery-скрипт для авторастяжки текстового поля textarea

Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.

И я нашел красивое решение, в виде jQuery-скрипта под названием jGrow. Проверял его в разных браузерах, в целом все нормально, заметил только один недочет — в Опере появляется горизонтальная прокрутка.

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

Здесь нам интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:

#comment — это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 — максимальное количество строк, до которых будет происходить авторастяжка. Если содержимое поля станет больше этого количества строк, то появляется прокрутка.

Илон Маск рекомендует:  Основы JavaScript

Если сделать вот так:


то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.

Прошу заметить следующий момент. Cрипт не работает, если тегу

Протестировать работу скрипта авторастяжки можно прямо на моем блоге.

Как изменить размеры textarea в HTML.

По умолчанию, при создании текстовой области textarea, она имеет определенные заданные значения высоты и ширины.

Посмотрите, как это выглядит:

Как правило, эти значения нас устраивать не будут и мы захотим их изменить.

В этой статье хочу показать, как это можно сделать.

Специально для задания размеров textarea используются два атрибута cols и rows.

rows — это атрибут, который позволяет задать высоту текстовой области в строках. Задавая здесь какое-нибудь значение, мы указываем сколько строк текста должна отображать текстовая область без прокрутки.

cols — это параметр, который задает количество символов, которые будут отображаться по горизонтали, без использования полосы прокрутки. С ее помощью вы можете регулировать ширину текстовой области.


Кроме того, изменять высоту и ширину можно с помощью стилей CSS и свойств width и height.

Изменить высоту textarea в зависимости от контента

Как сделать, чтобы при большом количестве текста размер textarea менялся (по высоте)? У меня появляется полоса прокрутки, а нужно, чтобы он автоматом увеличивал высоту textarea.

Если можно добиться этого, не используя скрипт на чистом css, — было бы очень здорово!

1 ответ 1

Вы можете воспользоваться готовым решением, это готовый плагин JS (jQuery), который называется Autosize.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html jquery css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402


Как для поля textarea HTML запретить изменение размера?

Приветствую вас на сайте Impuls-Web!

Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:

Или же вы хотите ограничить возможности пользователя по изменению размера поля textarea по горизонтали или по вертикали, для того, что бы сохранить верстку от нежелательных искажений:

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Как для textarea HTML запретить изменение размера в одном направлении?

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


В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

  • vertical – разрешает изменение размера текстового поля по вертикали
  • horizontal— разрешает изменение размера по горизонтали
Илон Маск рекомендует:  Что такое код hw_deleteobject

Как сделать авто размер высоты textarea?

Как сделать авто размер высоты textarea ? Как сделать без плагин и красиво?

2 ответа 2

А использовать contenteditable не годится?

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.

Связанные

Похожие


Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402

Авторастяжка TextArea, Изменение размера textarea в зависимости от введенного текста

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

В этом скрипте интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:

#comment — это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 — максимальное количество строк, до которых будет происходить авторастяжка.
Если содержимое поля станет больше этого количества строк, то появляется прокрутка.
Данное можете подстроить под себя как вам удобно.

Но если поставить так:

то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.

textarea resize CSS

Тег textarea.


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

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

Кнопка вне поля

Кнопка вне формы

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

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

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

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

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

Евгения Отличная статья, спасибо. Nomad Я буквально два дня назад столкнулся с терминами div >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

Илон Маск рекомендует:  Шаблон для сайта бизнес тематики HTML, CSS, JS

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 для изменения размера в зависимости от длины содержимого

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

Вы можете проверить высоту содержимого, установив на 1px , а затем прочитав свойство scrollHeight :

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

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

Было реализовано решение jquery, а исходный код доступен в github по адресу: https://github.com/jackmoore/autosize.

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

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

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


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

Ответ Alciende не совсем сработал у меня в Safari по какой-то причине только сейчас, но после небольшой модификации:

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

Один из методов заключается в том, чтобы сделать это без JavaScript, и это примерно так:

Я не думаю, что есть способ получить ширину текстов в шрифтах переменной ширины, особенно в javascript.

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

Вы можете достичь этого, используя диапазон и текстовое поле.

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

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

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

Посмотрите другие вопросы по метке javascript или Задайте вопрос

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL