Как сделать красивый textarea

Добавил пользователь Валентин П.
Обновлено: 22.08.2024

Особенности отображения форм в разных браузерах

Чтобы разобраться в особенностях вывода информации в каждом браузере, необходимо изучить одну и ту же форму в разных браузерах

Изучив детально вывод формы в каждом браузере, можно отметить следующие особенности отображения кода:

некоторые браузеры устанавливают разные внутренние отступы (padding) по умолчанию, причем от этой проблемы нельзя избавиться с помощью универсального селектора;
в теге textarea в разных браузерах устанавливается свой размер и тип шрифта (отлично это видно в сравнении Firefox и других браузеров);
не одинаковое выравнивание шрифта по горизонтали (особенно это видно, когда рядом с полем установлен label).

Еще более заметны становятся различия при применении необычных стилей для оформления элементов форм.

Решение проблемы

Исходя из выявленных различий в отображениях формы, можно легко составить код, который приводит к одинаковому оформлению во всех браузерах. В первую очередь назначаем в принудительном порядке внутренние отступы через свойство padding. Также необходимо установить размер шрифта через font-size, а для поля textarea дополнительно уточнить и семейство шрифта через font-family.

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

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

Еще определенные проблемы могут возникнуть при определении фиксированного значения высоты текстового поля или верхнего внутреннего отступа. Чтобы не быть голословным, предлагаю рассмотреть практический пример. Создадим поле с высотой 30 пикселей, шириной – 250 пикселей, и установим верхний внутренний отступ, величиной 5 пикселей.

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

Ну с высотой тут все понятно, на ней останавливаться подробно не будем. Просто напомню, что IE понимает принципы блочной модели по своему и не учитывает внутренние отступы при определении высоты. А что касается выравнивания текста, то необходимо сделать следующее:

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.

Общая идея решения

Разбираем решение

За основную задачу возьмем — создание класса, который на вход получает значения целевой ноды (textarea), функции — проверки на выделение и значение шрифта (css свойства font)
Конструктор класса должен добавить в DOM-модель документа необходимый элемент pre, позиционировать его и повесить события. Сюда же можно добавить установку css свойств.

Итак, каркас класса создан. Определим оставшиеся методы класса:

CSS-свойства

Приведем список определенных свойств, а затем разберем их:

Как уже было сказано, элемент pre должен позиционироваться под textarea, поэтому позиционируем его абсолютно и устанавливаем z-index в -1. Добавляем отступы, скроллы.
Теперь перейдем к определениям word-wrap и white-space. В данной задаче эти свойства играют очень важную роль.
white-space: pre-wrap позволяет учитывать все пробелы в строках и в то же время он не позволяет продолжать текст горизонтально (переносит его), если он не помещается в 1 строку
word-wrap:break-word — определяет поведение текста, при котором слова, не помещающиеся на 1 строку не растягивают элемент, а переносятся на другую строку.

В результате мы получаем выделение текста по результату работы нашей функции:

Расширения

В данном примере представлен способ работы для встроенной функции.
В тех или иных ситуациях возможны случаи, когда результат (выделять\не выделять) необходимо получить от сервера. В таком случае возможно воспользоваться паттерном команда, чтобы отправлять серверу только список изменений. А, непосредственно, выделение организовать в отдельной callback функции.

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 удалит прокрутки, но включит прокрутку автоматически в случае необходимости.

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

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

Читайте также: