Как в textarea вставить html код
Поле представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
Атрибуты
accesskey Переход к полю с помощью сочетания клавиш. autofocus Автоматическое получение фокуса. cols Ширина поля в символах. disabled Блокирует доступ и изменение элемента. form Связывает текстовое поле с формой по её идентификатору. maxlength Максимальное число введенных символов. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder Указывает замещающийся текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. rows Высота поля в строках текста. tabindex Порядок перехода между элементами при нажатии на клавишу Tab. wrap Параметры переноса строк.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег TEXTAREA Введите ваш отзыв:
Тег HTML текстовая область, многострочное поле ввода
Тег в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.
Текстовое поле для ввода, созданное с помощью тега , не имеет ограничений по количеству вводимых символов.
Размеры textarea HTML регулируются с помощью атрибутов rows и cols . Атрибут тега rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.
По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать фиксированного размера, следует использовать CSS-правило resize: none; . Это отключит возможность растягивать область ввода.
Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Примеры использования в HTML коде
HTML код текстовой области
с фиксированным размером (no resize textarea)
По умолчанию пользователь может изменять размер текстовой области (растягивать область ввода за край).
Для того, чтобы запретить изменение размера используйте CSS свойство resize . Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.
Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину при фиксированной высоте, используйте значения horizontal.
Отображение в браузере:
HTML код с фиксированной шириной и высотой
textarea[name="details"] <
resize: none;
>
Поддержка браузерами
| Тег |  |
 |
 |
 |
|
| Да | Да | Да | Да | Да |
Атрибуты тега textarea
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.
Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области.
Логический атрибут. Если указан, делает текстовую область неактивной.
Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область.
Указывает на форму, к которой относится текстовая область. Используется, если находится вне HTML кода формы.
Если текстовая область находится внутри тега , то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится.
Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен.
Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения.
Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена.
Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.
Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга).
Определяет правила переноса строк:
Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина . Для использования этого значения необходимо указать атрибут cols.
Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию.
При нажатии вставить HTML коды в textarea
Мучаюсь уж как 2 дня, подскажите как сделать такое: Есть картинки(иконки)сверху, нужно, чтобы при нажатие на любую из них в textarea который ниже находиться вставлялись спец коды к примеру , то есть HTML коды. мне подсказали что это делается на jquery .
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 24 фев 2014 в 13:03
745 2 2 золотых знака 17 17 серебряных знаков 30 30 бронзовых знаков
при нажатии на картинки добавит в textarea, так?
24 фев 2014 в 13:25
возможно, вы имели ввиду BB — коды?
24 фев 2014 в 14:50
первый комментарий bemulima верный, мне именно так нужно
24 фев 2014 в 15:00
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Используй любой из WYSIWYG-редакторов. Если по-своему, то можно так:
var ta = $('#qwe'), ico = $('.icon'); ico.on('click', function() ' ); break; //можно дописать другие кейсы для новых иконок > >); Можно улучшить, чтобы обрамляло выделенный текст.
Курсы javascript
Здравствуйте!
Столкнулся с вот такой проблемой. Создаю форму всю ее писать не буду напишу лишь для наглядности поле
в него помещаю просто текст все работает как нужно при обновлении страницы текст находится в поле, но когда вставляю не просто текст а что-то вроде этого то-есть слово «просто» я выделил жирным начертанием то при обновлении страницы тег выводится в поле в естественном виде, а нужно что бы он задал жирное начертание.
Как это можно сделать?
Я знаю, что так возможно сделать потому что видел во многих редакторах такое, вот только разбирая их не понял как это можно реализовать, надеюсь на вашу помощь!
05.03.2012, 00:12
что-то знаю
Регистрация: 24.05.2009
Сообщений: 5,176
05.03.2012, 04:10
Регистрация: 04.12.2009
Сообщений: 579
в редакторах существуют переключатели с визуального на html-вариант отображения.
html-вариант — это обычная textarea, поэтому и отображает теги.
визуальный вариант — это эмуляция textarea обычным блоком. Эмулируется двумя способами (вернее, я знаю только два способа, может ещё есть):
1. как описал devote — наложением.
2. javascript’ом перехвата нажатия клавиш и добавления результата в блок с соответственным форматированием.
сам делал в прошлом году по второму варианту.. громадный скрипт, большой геморрой и потраченные нервы, но вроде всё работало
минусы:
1. трудно сделать мигающий курсор, как в textarea
2. приходится дополнительно заморачиваться с отловом позиций (и тут contenteditable спасает)