Автоматическое изменение размера элемента textarea

Содержание

Автоматическое растягивание textarea на javascript и jQuery

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

Вариант 1: авто-растягивания textarea (на чистом javascript)

Пожалуй это лучшее решение, поэтому это первый вариант.

А это прямая ссылка на сам javascript код, который нужно подключить к html: https://github.com/jackmoore/autosize/blob/master/src/autosize.js

Установка проста: подключаете файл скрипта с помощью wp_enqueue_script(). Затем подключаете растягивание к элементу textarea одним из следующих вариантов:

Chrome Firefox IE Safari iOS Safari Android Opera Mini
yes yes 9 yes yes 4 ?

меню

Вариант 2: авто-растягивания textarea (jQuery плагин)

Если у вас на сайте установлена библиотека jQuery, то рекомендую хороший плагин для автоматического растягивания textarea.

Поделюсь сразу сжатой версией кода плагина:

После установки этого кода, все textarea должны автоматически растягиваться.

Во время тестирования выяснил, что у textarea обязательно должно быть установлено css свойство display:block , иначе никакая анимация в плагине не работала (браузер chrome). Поэтому добавил в плагин пару строк кода, чтобы он сам устанавливал это свойство. Также, в некоторых браузерах есть возможность изменять размер поля вручную (в углу треугольничек), плагин эту возможность зачем-то убирал, я её вернул. Поэтому в заголовке @version 1.04.1 (kama fix)

Несжатая версия кода плагина:

Настройка плагина

Во время инициализации плагину можно установить некоторые параметры.

1. Уберем отступ снизу, по умолчанию он равен 20 пикселей:
2. Вешаем действия на события в момент ресайза и после него — настройки onResize и animateCallback:

Все настройки

Вариант 3: авто-растягивания textarea (мой старый скрипт)

Так сложилось, что первая версия скрипта для автоматического растягивания поля комментария в WordPress оказалась не самой лучшей . Когда я её тестировал почему то не заметил баг, который заключался в том, что при сильном растягивании поля, экран начинал прыгать наверх при нажатии на любую клавишу, в результате большой комментарий оставить вообще не представлялось возможным . Кроме этого, в IE 8 скрипт тормозил.

В общем, проведя не один час в попытках починить скрипт, я понял, что сделать это невозможно — нужно что-то кардинально менять. В результате, начал искать альтернативное решение. Попадались решения основанные на jQuery, но мне хотелось сделать на чистом JS. Решение с jQuery я оставил на крайний случай.

Серфинг вывел меня на решение, которое мне показалось приемлемым с точки зрения удобства. Посмотреть на это решение можете в этой демке (может кому пригодится). Немного поковырявшись со скриптом, я понял что сделать простую интеграцию в WordPress не получится (придется дополнять форму комментирования, добавлять CSS и конечно подключать сам Скрипт), а мне хотелось, чтобы было так: вставил скрипт и готово. Ведь, такое сомнительное юзабилити не стоит лишних усилий.

Поэтому я пошел сёрфить дальше и нашел интересную функцию подсчета строк, которую и доделал. Результат меня вполне устроил: взгляните на эту ДЕМО версию.

Из плюсов этого варианта изменения размеров поля комментирования, можно выделить:

  • простая интеграция в шаблон;
  • хороший подсчет высоты;
  • не тормозит.

Очередной новый вариант, от 16 декабря 2013 года. Подправил код, исправил баг — код был написан немного не корректно и мог нагружать компьютер. Теперь этого нет.

Установка скрипта

Скопируйте вышеописанный код в любой уже имеющийся в шаблоне javascript файл;

Установите полю textarea CSS свойство min-height ( как это сделать см. ниже );

  • (необязательно) Если не хотите, чтобы поле тянулось до бесконечности установите ему CSS свойство max-height;
  • Как вставить скрипт прямо в файл темы:

    Если js файла у вас в шаблоне нет, то можно его создать, скопировать туда код, а затем подключить файл к шаблону.

    Или можно просто подключить выше написанный код в ваш файл шаблона single.php, вставив такую конструкцию в файл:

    Как установить полю textarea css свойство min-height

    Вариант 1: Откройте файл comments.php найдите там HTML тег textarea и добавьте к нему style=’min-height:200px; max-height:700px;’ . На вид примерно так:

    max-height:700px; можно не добавлять — это максимальная длинна до которой будет растягиваться поле.

    Вариант 2: Найдите в вашем файле стилей (style.css) класс, который отвечает за поле textarea и добавьте к нему CSS свойство min-height:200px; . Если там присутствует свойство height:XXXpx , то его нужно удалить.

    Несколько вариантов как может называться класс который отвечает за поле:

    Тех. подробности: как работает скрипт

    Принцип работы кода заключается в следующем: когда курсор попадает в поле комментирования включается периодический подсчет строк (каждые пол секунды), когда курсор выходит из поля, подсчет строк останавливается. Строки считаются путем суммы количества явных переносов строки (\n) и вычисление неявных переносов (когда строка переводится на новую из-за нехватки ширины поля, над этим моментом пришлось биться долго и муторно).

    Принципиальная разница с прошлым вариантом в том, что применяется другая технология подсчета строк и строки считаются не по нажатию клавиши а спустя какое-то время, в нашем случае 500 миллисекунд (пол секунды). Интервал можно увеличить, если наблюдаются тормоза. В вариантах, когда подсчет высоты вешается на нажатие клавиши, везде наблюдаются тормоза, особенно на слабых компах и при быстром печатание.

    Если возникнут вопросы задавайте в комментариях!

    Создание textarea с автоматическим изменением размера

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

    код с этой страницы ниже:

    30 ответов

    это работает для меня (в Firefox 3.6/4.0 и Chrome 10/11):

    если вы хотите попробовать его на jsfiddle Он начинается с одной строки и растет только точное необходимое количество. Это нормально для одного textarea , но я хотел написать что-то, где у меня было бы много много много таких textarea s (примерно столько, сколько обычно имеют строки в большом текстовом документе). В таком случае это очень медленно. (В Firefox это безумно медленно.) Что мне нравится подход, который использует чистый CSS. Это было бы возможно с contenteditable , но я хочу, чтобы это был только открытый текст.

    ПОЛНОЕ, НО ПРОСТОЕ РЕШЕНИЕ

    Обновлено 23/08/2020 (улучшена поддержка браузера для мобильных телефонов и планшетов)

    следующий код будет работать:

    • на клавишу Ввод.
    • с вставленным текстом (щелкните правой кнопкой мыши и ctrl+v).
    • с вырезанным текстом (щелкните правой кнопкой мыши и ctrl+x).
    • С предварительно загруженным текстом.
    • со всеми textarea (многострочное текстовое поле) и сайт широкий.
    • С в Firefox(v31-55 проверено).
    • С Chrome(v37-60 проверено).
    • С IE(протестировано v9-v11).
    • С Edge(в14-программы V15 проверено).
    • С айфоновском Safari.
    • С Android Браузер.
    • С JavaScript строгого режима.
    • Is консорциума W3C проверено.
    • и оптимизирован и эффективен.

    Вариант 1 (С jQuery)

    этот код требует в jQuery и был протестирован и работает с 1.7.23.2.1

    простой (добавьте этот код jquery в ваш файл master script и забудьте об этом.)

    вариант 2 (Чистый JavaScript)

    простой (добавьте этот JavaScript в файл мастер-скрипта и забудьте об этом.)

    решение на jQuery настройте css в соответствии с вашими требованиями

    или Альтернатива для jQuery 1.7+.

    Я создал скрипку с абсолютным минимальным стилем в качестве отправной точки для ваших экспериментов. http://jsfiddle.net/53eAy/951/

    протестировано в Firefox 14 и Chromium 18. Числа 24 и 12 произвольны, проверьте, что подходит вам лучше всего.

    вы могли бы обойтись без тегов стиля и скрипта, но это становится немного грязным imho (это старый стиль HTML+JS и не рекомендуется).

    Edit: модернизированный код. Изменен атрибут метода onkeyup метода addEventListener.
    Edit: keydown работает лучше, чем keyup
    Edit: объявить функцию перед использованием
    Edit: ввод работает лучше чем keydown (thnx @WASD42 & @MA-Maddin)

    лучшее решение (работает и короткое) для меня:

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

    пожалуйста, взгляните на jsFiddle.

    вы используете более высокое значение текущего clientHeight и scrollHeight содержимого. При уменьшении высоты прокрутки путем удаления содержимого вычисляемая область не может уменьшиться, так как высота клиента, ранее заданная стилем.высота, держит его открытым. Вместо этого вы можете взять max() scrollHeight и минимальное значение высоты, которое вы предопределили или рассчитали из textarea.строки.

    В общем, вы, вероятно, не должны полагаться на scrollHeight на элементы управления формой. Помимо того, что scrollHeight традиционно менее широко поддерживается, чем некоторые другие расширения IE, HTML/CSS ничего не говорит о том, как элементы управления формой реализуются внутри, и вы не гарантируете, что scrollHeight будет чем-то значимым. (Традиционно некоторые браузеры использовали виджеты ОС для этой задачи, что делает невозможным взаимодействие CSS и DOM на их внутренних устройствах.) По крайней мере нюхать для существования scrollHeight/clientHeight, прежде чем пытаться включить эффект.

    еще один возможный альтернативный подход, чтобы избежать этой проблемы, если важно, чтобы она работала более широко, может заключаться в использовании скрытого div размером с ту же ширину, что и textarea, и установить тот же шрифт. На keyup вы копируете текст из textarea в текстовый узел в hidden div (не забывая заменить «\n «на разрыв строки и избежать»

    Если вам не нужно поддерживать IE8, вы можете использовать input событие:

    теперь вам нужно только добавить CSS, и все готово:

    использование:

    вы можете узнать больше о том, как он работает на моем блоге.

    autosize

    просто работает, автономно, популярно (3.0 K + GitHub stars по состоянию на октябрь 2020), доступно на cdnjs) и легковес (

    кстати, если вы используете редактор ACE, используйте maxLines: Infinity : автоматическая настройка высоты содержимого в Редакторе Ace Cloud 9

    кто-нибудь считал contenteditable? Не возиться с прокруткой, и единственный JS, который мне нравится, — это если вы планируете сохранять данные о размытии. и, видимо, она совместима на всех популярных браузерах : http://caniuse.com/#feat=contenteditable

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

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

    я использовал следующий код для нескольких переключателей. Отлично работает в Chrome 12, Firefox 5 и IE 9, даже при удалении, вырезании и вставке действий, выполняемых в текстовых областях.

    следующие работы для резать, наклеивать, ЕТК., независимо от того, являются ли эти действия от мыши, сочетания клавиш, выбрав опцию из строки меню . несколько ответов принимают аналогичный подход, но они не учитывают размер коробки, поэтому они неправильно применяют стиль overflow: hidden .

    я делаю следующее, что делает работу с max-height и rows для минимума и максимума высота.

    для абсолютной полноты, вы должны вызвать adjust функция в еще нескольких обстоятельствах:

    1. события изменения размера окна, если ширина textarea изменения с изменением размера окна или другие события, которые изменяют ширину textarea
    2. когда textarea ‘ s display изменения атрибута стиля, например, когда он идет от none (скрытый) block
    3. когда значение textarea изменен программно

    обратите внимание, что с помощью window.getComputedStyle и получении currentStyle может быть несколько вычислительно дорогим, поэтому вы можете захотеть кэшировать результат вместо этого.

    работает для IE6, поэтому я действительно надеюсь, что это достаточно хорошая поддержка.

    существует несколько иной подход.

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

    преимущество в том, что фреймворки представляют простые инструменты для перемещения текста, не касаясь каких-либо событий. А именно, в AngularJS вы бы добавили ng-model=»foo» ng-trim=»false» до textarea и ng-bind=»foo + ‘\n'» до pre . Вижу скрипка.

    просто убедитесь, что pre имеет тот же шрифт размер как textarea .

    немного исправлений. Отлично работает в Opera

    Я знаю короткий и правильный способ реализации этого с помощью jquery.Не требуется дополнительный скрытый div и работает в большинстве браузеров

    Я не знаю, упоминал ли кто-нибудь об этом, но в некоторых случаях можно изменить высоту с помощью атрибута rows

    вот директива angularjs для ответа панци.

    в качестве другого подхода вы можете использовать , который меняет свой размер автоматически. Вам нужно будет сделать его редактируемым, добавив contenteditable=»true» свойство и вы сделали:

    единственная проблема с этим подходом заключается в том, что если вы хотите представлять ценность как часть формы, вам придется сделать это самостоятельно на JavaScript. Сделать это относительно легко. Например, вы можете добавить скрытое поле и в onsubmit событие присвоения формы значение span в скрытое поле, которое будет автоматически подано в форме.

    некоторые из ответов здесь не учитывают заполнение.

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

    еще более простой, более чистый подход таков:

    все что нужно, это добавить .auto-height любой textarea , котор вы хотите пристрелть.

    протестировано в FF, Chrome и Safari. Дайте мне знать, если это не сработает для вас, по любой причине. Но это самый чистый и простой способ, которым я нашел это работать. И это отлично работает! : D

    этот код работает для вставки и также выберите Удалить.

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

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

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

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

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

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

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

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

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

    Автоматическое изменение высоты у элемента textarea

    Для одного проекта передо мной стояла задача найти способ автоматически изменять высоту элемента textarea согласно тому контенту, который будет динамически загружаться посредством Ajax. Так как высота контента мне была неизвестна, а элемент textarea не может подстраивать свои размеры под контент так же гармонично, как это делают другие HTML элементы, то при каждом изменении контента мне приходилось вручную вносить высоту элемента в JavaScript.

    — многострочное поле текстового ввода в форме.

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

    Воспользуемся невидимым элементом-клоном

    • Захватить контент, загруженный в элемент textarea
    • Создать невидимый элемент-клон ( div )
    • Задать для элемента-клона такие же типографические свойства и ширину, как и у элемента textarea .
    • Поместить контент в клон
    • Получить высоту элемента-клона
    • У элемента textarea высоту сделать равной высоте элемента-клона

    Ключевую роль в моем решении будет играть CSS. Как упоминалось выше, невидимый клон должен иметь те же типографические свойства, что и элемент textarea . Поэтому свойства font-siz e, font-family , white-space и word-wrap элемента-клона должны соответствовать свойствам font-size , font-family , white-space и word-wrap элемента textarea.

    Заметьте, что мною был добавлен отдельный класс с объявлением overflow: hidden . Это было сделано для того, чтобы предотвратить появление scrollbar-ов. Обычно добавлять такое объявление тегу textarea весьма сомнительно. Но в нашем случае оно уместно, так как я буду менять размеры элемента textarea с помощью JavaScript. Этот класс будет добавлен к textarea посредством JavaScript, что обеспечит нам скроллирование поля формы в случае, если JavaScript выключен.

    СSS невидимого элемента-клона

    Краткий анализ: во-первых, я использую объявление display: none , так как я не хочу, чтобы блок-клон видел пользователь. Полагаю, что это сгодится и для скрин-ридеров, так как, опять же, я не хочу, чтобы они могли прочитать информацию с элемента-клона. Если у кого-то есть лучшее решение, чтобы спрятать блок от вспомогательных устройств, пожалуйста, дайте мне знать.

    Свойству white-space задано значение pre-wrap , что означает: в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. Элементу-клону я задал такую же ширину, как и у элемента textarea , и продублировал типографические свойства. И клон, и textarea имеют одинаковый min-height , чтобы они всегда изначально имели стандартный и практичный вид.

    Перейдем к jQuery

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

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

    Как насчет IE6-8?

    Я чуть не бросил написание этой статьи, так как код не работал в IE6-8. Не работал он в связи со слабой обработкой в IE внутреннего содержания HTML. Решение я все же нашел, плюс мне попался jQuery плагин. Он использует тот же метод, что и я (клонированный элемент), и работал он (главным образом) в IE.

    Вот строка, которую я позаимствовал из этого примера и которая решает (главным образом) мою проблему с IE:

    Однако даже после добавления этой строки все еще оставалась одна загвоздка: длинные строки текста не влияли на высоту элемента textarea . Решить эту проблему помогло добавление к элементу-клону объявление word-wrap: break-word к CSS.

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

    Динамическое изменение размеров textarea под содержимое

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

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

    1 ответ 1

    Возможно что-то упустил, но как-то так:

    Связанные

    Похожие

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

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

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

    Автоматическое изменение размера элемента textarea

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

    24 января 2011 г.

    Textarea Auto Resize

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

    значение минимальной высоты min-height.

    Теперь определим javascript-функцию autoresize, вызываемую каждый раз при нажатии на клавишу (при фокусе, установленном на наш элемент

    Здесь выполняется вычисление размера элемента, и в случае превышения им минимально позволенного — подгон.

    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: 535fbc0fbf64906f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    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

    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 — незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый нижний угол. Сделано это с добрыми намерениями, но для верстальщика оборачивается не самыми приятными последствиями.

    Вот пример формы, где разрешено изменение

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

    Запретить изменение размера TEXTAREA

    Первая мысль — это полный запрет изменения размера. Достаточно добавить стиль:

    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.

    Цукерберг рекомендует:  Самостоятельное обучение программированию игры и программы
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих