Автоматически расширяющиеся элементы textarea Высота textarea Есть несколько преимуществ:
- В дизайне вашей страницы не доминируют большие
textarea - Онлайн-формы с несколькими текстовыми областями выглядят короче и менее сложными для заполнения.
- Пользователь может видеть весь свой текст без прокрутки.
Посмотреть расширяющуюся демонстрацию textarea …
В этом руководстве из трех частей описывается, как создать автоматически расширяющуюся textarea К концу третьей части вы поймете, как это работает, и получите код для использования в ваших собственных проектах.
Требования
Как и все хорошие разработчики, мы должны хорошо понимать системные требования:
- Любая
textarea - Однако некоторые текстовые области могут не требовать автоматического расширения функциональности.
- Мы должны быть в состоянии указать, что высота
textarea - Наше решение должно быть повторно использовано на любой странице, которую мы выберем.
- Следует использовать методы прогрессивного улучшения, чтобы гарантировать, что пользователи без JavaScript все еще могут использовать стандартное поле
textarea - Решение должно быть кросс-браузерным, совместимым с IE6 +, Firefox 2+, Opera, Safari и Chrome.
Предложение
Мы будем реализовывать решение как плагин jQuery. jQuery в основном используется для обработки более обыденных аспектов DOM-сниффинга и делегирования событий; Вы можете легко переписать код, используя другой фреймворк.
Но как мы узнаем, когда нужно изменить размер textarea
Во-первых, мы можем назначить обработчик события «keyup» любой textarea Это вызовет функцию сразу после нажатия клавиши и изменения текста.
Затем мы можем проверить свойство DOM scrollHeight. Это возвращает высоту внутренней секции прокрутки, то есть высоту текста, введенного пользователем. Если мы установим высоту textarea К сожалению, scrollHeight не является рекомендацией W3C, и мы должны преодолеть некоторые кросс-браузерные несоответствия:
- В Firefox, Safari и Chrome scrollHeight никогда не бывает меньше высоты текстовой области, даже если текст не был добавлен. Следовательно, поле будет расширяться, но удаление текста не уменьшит его. Мы можем решить эту проблему, временно установив высоту textarea равной 0px, а затем применив реальное значение scrollHeight.
- В отличие от документации Mozilla scrollHeight , Firefox, по-видимому, не включает отступы textarea, в отличие от Safari 4 и Chrome 2. Если у нас есть 2px отступы сверху и снизу, scrollHeight будет в 4 раза больше в браузерах WebKit, а высота текстовой области будет расти бесконечно. Вычитание отступа сломало бы Firefox, поэтому самое простое решение — применить вертикальное заполнение 0px к нашим расширяющимся текстовым элементам.
- В IE и Opera scrollHeight необычен. Обычно он возвращает истинную высоту внутреннего текста, однако установка высоты текстовой области в 0px может вернуть неправильные значения scrollHeight. Хотя браузер воняет , я не думаю, что у нас есть альтернатива в этой ситуации. Мы должны убедиться, что IE и Opera никогда не устанавливают высоту текстовой области 0px.
Нам также нужно рассмотреть полосу прокрутки. По умолчанию в большинстве браузеров полоса прокрутки textarea Однако, если мы оставим переполнение установленным на «auto», полоса прокрутки появится при добавлении новой строки, а затем исчезнет при изменении высоты textarea Установка переполнения на «скрытый» решит проблемы с мерцающей полосой прокрутки, но это никогда не должно применяться к нерасширяющимся текстовым областям или тем, которые расширились за пределы заданной максимальной высоты.
Наконец, изменение размера окна браузера может стать проблемой. Жидкие веб-дизайны могут реализовать textarea Хотя мы можем обнаружить изменение размера окна, событие в IE ведет себя плохо и быстро вызывает обработчик. Мы можем закодировать эту проблему, но изменение размеров нескольких текстовых полей может привести к тому, что дизайн страницы будет перепрыгивать и вводить пользователя в заблуждение. Поэтому после изменения размера мы будем корректировать высоту textarea
Это много, чтобы принять, и это еще не все! Сделай себе кофе и приготовься ко второй части …