Как сделать невидимую textarea
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Для textarea – указывать тип поля text(type="text") не нужно!
Ширина и высота textarea
Ширину и высоту для textarea можно выразить несколькими способами и типами.
1). Использование в высоте и ширине textarea cols и rows
Обязательный атрибут для textarea rows + cols
Обязателен в HTML4, не обязателен в HTML5.
cols – столбец определяемый шириной моноширного(все буквы одной ширины) шрифта по умолчанию, rows - количество строк…
Любое целое положительное число.
Пример textarea rows + cols
2). Использование в высоте и ширине textarea пиксели
Не стану все меры расписывать(использую очень-очень редко): "em, vw, vh, vmin, vmax и функция calc" приведем пример использования пикселей в качестве единицы измерения:
Пример ширина и высота textarea в пикселях:
3). Использование в высоте и ширине textarea процентов
Пример ширина и высота textarea в процентах:
Вопрос на засыпку! Почему в выше приведенном примере высота textarea в процентах никак не сработала!?
Вывод можете из ниже приведенного кода:
Пример 2 ширина и высота textarea в процентах:
Но если мы помести наш textarea в какой-то другой блок с явно выставленными размерами, то:
4). Растянуть textarea на всю ширину блока/страницы
Как растянуть textarea на всю ширину блока, страницы!? Если как мы выяснили, если ничего не препятствует растягиванию textarea на всю ширину блока/страницы, то просто ставим в ширину textarea 100%.
Пример textarea() с шириной на всю ширину блока/страницы
5). Растянуть textarea на всю высоту блока/страницы
Как сделать подсказку внутри textarea
Для того, чтобы сделать подсказку внутри textarea нам потребуется атрибут [placeholder]? вставляем в первый тег textarea placeholder с текстом.
Подсказка внутри textarea пример:
Как убрать обводку textarea при нажатии/вводе
Для того, чтобы удалить обводку, при нажатии вводе данных в поле ввода textarea поставьте в стилях css, либо внутри поля поставьте свойство : outline:none;
Пример удаления обводки в textarea
Как запретить растягивание textarea
Иногда требуется запретить растягивание textarea.
Как запретить растягивание по горизонтали textarea
Для того, чтобы запретить растягивание по горизонтали нужно указать, как растягивание возможно, если мы введем в стили resize: vertical;, то растягиваться textarea будет только по вертикали.
Пример textarea с запретом растягивания по горизонтали!
Как запретить растягивание по вертикали textarea
Для того, чтобы запретить растягивание по вертикали нужно выставить в каком направлении растягивать можно! Ставим в стили textarea resize: horizontal;
Пример textarea с запретом растягивания по вертикали!
Как запретить растягивание по всем направлениям textarea
Пример textarea с запретом растягивания ппо всем направлениям textarea !
Как поставить textarea посередине страницы, блока
Для того, чтобы поставить textarea посередине, нужно в стили textarea добавить. margin: auto; display: block;
Пример как расположить textarea посередине страницы, блока
Как сделать в textarea внутренние отступы
Для того, чтобы сделать внутренние отступы в textarea нужно добавить в стили textarea padding: число px;, давайте на примере textarea сделаем внутренний отступ 20px
Пример textarea с внутренними отступами 20px
Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в padding ставим 4 значения и указываем, с какой стороны вам нужно сделать внутренний отступ!
padding: верх px справа px снизу px слева px;
Если отступ с какой-то стороны не требуется ставим 0px
Как сделать в textarea наружные отступы
Для того, чтобы продемонстрировать наружные отступы, нам потребуется наш textarea поместить во внутрь другого блока. теперь уже данный блок поставим посередине и для div поставим display: table; , чтобы он не растягивался на всю ширину.
Привер как сделать в textarea наружные отступы
По аналогии с padding :
Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в margin 4 значения и указываем, с какой стороны вам нужно сделать наружный отступ!
margin: верх px справа px снизу px слева px;
Если отступ с какой-то стороны не требуется ставим 0px
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 удалит прокрутки, но включит прокрутку автоматически в случае необходимости.
Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]
Стилизация: изменить цвет placeholder CSS
Поменять стиль поля ввода с placeholder CSS
Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .
Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .
Подсказка пропадает при получении фокуса и
В конце длинного обрезанного подсказывающего текста поставить многоточие
Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.
Сделать смещающиеся или всплывающие в
Эффект placeholder для
Атрибут placeholder работает только для и
Древний метод на память, изменяющий value JavaScript
CoMiGo Games Стоит добавить тот факт, что placeholder в Мозилле и Хроме серьёзно отличаются — у Мозилки он с 50% прозрачностью, а в Хроме непрозрачный. Поэтому в Хроме они особо хреново распознаются как заглушка пустого поля. Поэтому я везде дополнительно пихаю такой вот код: NMitra Да, мне тоже нравится полупрозрачный плейсхолдер. Только вот нужно писать разные правила с селекторами с префиксами, в которых полнейшее разночтение CoMiGo Games Ну, один такой блок кода всё равно можно добавить и перетерпеть этот момент :) Так, конечно, в реальном мире разночтения отсутствуют только в том случае, если ты пишешь гибридное веб-приложение, которое всегда поставляется вместе со своим определённым вшитым браузером (как у меня, хо-хо))) Чтобы автоматически добавлялись всякие такие браузерные вариации, люди придумали препроцессоры CSS (которые берут файлы на своём языке и создают на их основе CSS) и постпроцессоры (которые работают на основе простого CSS и делают его ещё круче). Из последних известен PostCSS, из первых я предпочитаю Stylus. Надо во всём этом разбираться, да, но когда разберёшься и наделаешь себе шаблонов проектов — всё идёт на поток и на конфигурацию этих радостей современного интернета не обращаешь внимание :) В общем, теперь, если будет свободное время, ты знаешь, на что его ещё можно потратить :D NMitra Это всё уже почти в прошлом: новые префиксы к свойствам браузеры не добавляют. С существующими нельзя добиться нормального отображения во всех версиях браузеров (IE6 и т.п.). Так что я просто отрубаю какой-то эффект для старых версий. Единственное, сморю, чтобы элемент был пусть не таким красивым, ровным и аккуратным, зато доступным. Например, надпись из span видна только при поддержки :placeholder-shown :
Элемент textarea HTML — это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.
Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.
Примеры
В первом примере мы создадим форму с элементом управления textarea со всеми значениями по умолчанию. Также мы установим атрибут placeholder с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:
Во втором примере мы установим начальное значение в качестве содержимого HTML textarea . Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.
В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого ( вместо атрибута value ):
Далее мы используем атрибуты cols и rows , чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.
Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:
В следующем примере мы используем два атрибута. Они устанавливают ограничения на длину текста, который может быть введен в текстовую область. Это minlength и maxlength , их названия говорят сами за себя.
Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.
Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:
Поддержка браузерами атрибута является неполной. Чтобы обеспечить этот функционал во всех браузерах, придется использовать скрипты.
Атрибуты
Специальные атрибуты
autocomplete
Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea допустимы два значения, они не чувствительны к регистру:
- on: браузер должен предлагать варианты автоматически. Это значение по умолчанию;
- off: браузер не должен предлагать варианты автоматически.
autofocus
Ширина элемента управления, задаваемая через количество символов исходя из ширины литер текущего шрифта. Так как символы не всегда имеют одинаковую ширину, браузеры могут использовать различные методы, чтобы округлить это значение.
Значение, указанное в этом атрибуте тега textarea в HTML должно быть целым числом больше нуля. Если значение отсутствует или имеет некорректный формат, атрибуту будет присвоено значение по умолчанию — 20 .
dirname
Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5 , позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.
Так как этот атрибут textarea HTML является относительно новым, он не полностью поддерживается браузерами. Разработчики должны проверять поддержку браузерами при получении данных на стороне сервера.
disabled
Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения ( если таковые имеются ) не передаются при отправке данных формы.
Значение атрибута идентификатора формы, с которой HTML input textarea связан.
Этот атрибут является новым и был введен в HTML5 . Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.
inputmode
Указывает, какой способ ввода является наиболее приемлемым для пользователей. Существует двенадцать возможных значений, не чувствительных к регистру:
Браузеры могут использовать информацию, содержащуюся в этом атрибуте, чтобы предоставить средства, помогающие пользователю вводить данные. Например, виртуальные экранные клавиатуры могут предоставлять специальные клавиши для выбранного режима ввода.
maxlength
Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.
minlength
Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.
Поддержка браузерами атрибута minlength является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.
Имя тега textarea в HTML . Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.
placeholder
Текст подсказки, как должно быть заполнено поле ( пример или краткое описание ). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.
readonly
Хотя этот атрибут не позволяет редактировать значения элемента управления, но блокируются не все действия: пользователь все равно сможет выделить и скопировать текст в элементе управления.
required
Поддержка браузеров для атрибута required является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить данный функционал во всех браузерах.
Количество строк, отображаемых в элементе управления. Если текст внутри элемента управления содержит больше строк, чем задано атрибутом, браузер выведет вертикальную полосу прокрутки, чтобы пользователь смог получить доступ к скрытому содержимому.
Значение, указанное в этом атрибуте тега textarea в HTML , должно быть целым числом больше нуля. Если значение отсутствует или имеет неправильный формат, то для атрибута будет назначено значение по умолчанию — 2 .
Значение, указывающее браузеру, должен ли переноситься текст при отправке данных формы. Для атрибута доступно два значения, не чувствительных к регистру:
- soft : текст не будет переноситься при отправке данных формы, но он может переноситься при отображении. Это значение по умолчанию;
- hard : текст будет переноситься при отправке данных формы с помощью добавления новых строк. Таким образом длина текста не превысит ширину фрейма.
Это относительно новый атрибут textarea HTML , его поддержка является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить этот функционал во всех браузерах.
Читайте также: