Как сделать чтобы теги в textarea не превращались в текст?
Но если в div какой-то html код, например картинка 
Отслеживать
задан 6 июн 2016 в 11:19
450 3 3 серебряных знака 19 19 бронзовых знаков
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа)
7 июн 2016 в 7:33
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Всё что находится в textarea имеет только текстовое свойство и не может содержать теги. Для этого есть div с атрибутом contenteditable=’true’
c = document.getElementById('content'); b = document.querySelectorAll('button'); b[0].onclick = function() < c.innerText = 'Font'; > b[1].onclick = function() < c.innerHTML = c.innerText; >b[2].onclick = function()
.content
Отслеживать
ответ дан 6 июн 2016 в 11:33
3,847 3 3 золотых знака 19 19 серебряных знаков 36 36 бронзовых знаков
Сделал пример codepen.io/stopani/pen/dXYRor то есть пишу в div знак < , то после нажатия на кнопку добавить этот div меняется на textarea и через инспектор видно что знак уже такой < . как сделать чтоб этот знак < не менялся?
7 июн 2016 в 10:15
@СергейЛапшин, всё что написано в div становится текстом, а не html элементом. В textarea не могут быть элементы html, только текст. Объясни толком что должно происходить?
7 июн 2016 в 10:24
Мне нужно просто отправить картинку в комментарии. Дополнил пример codepen.io/stopani/pen/dXYRor
7 июн 2016 в 10:34
@СергейЛапшин, если я правильно понял: Есть div , туда мы вставляем и после этого в div должна появиться картинка вместо текста, верно?
7 июн 2016 в 10:36
Да, но когда div меняется на textarea получается текст и картинка отправляется с ошибкой <img src=» и в комментарии уже выводится просто текстом из-за этого <
7 июн 2016 в 10:42
вы можете вставить любой текст с тегами, и этот текст прекрасно отобразится. Поэтому в скрипте должна быть выполнена следующая последовательность действий:
- Вычисляете innerHtml родительского элемента для textarea.
- Заменяете операциями над строками в нем строку между
HTML cвойства тега textarea
Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.
Размеры textarea
Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).
Или указывать размер в CSS свойствах:
textarea
В первом случае мы точно знаем, сколько символов поместится в форме, во втором случае будет проблема, так как иногда буквы будут обрезаны.
Замещающий текст в HTML5
Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.
Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.
Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.
Как убрать свечение у textarea?
Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:
textarea
Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.
Как удалить маркер изменения размера у textarea?
Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:
textarea
Nowrap — убрать переносы
Чтобы текст автоматически не переносился, в CSS можно использовать #whatever . Но это описание не работает с textarea. Если вы хотите иметь возможность не переносить слова на новую строку в textarea, пока вы не нажмете Enter (будет возникать горизонтальная полоса прокрутки, а не срабатывает), вам придется использовать атрибут wrap=»off».
Как убрать полосу прокрутки textarea в Internet Explorer?
IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.
html код в textarea. Редактор кода сайта в textarea.
При очередном написании кода, а точнее простенького движка, решил реализовать редактор самих страниц сайта и в том числе админки. Многие на форумах пишут — «Зачем это надо, редактируй в блокноте». А я вот хочу как в вордпрессе, но чтобы для редактирования была доступна даже сама страница редактирования.
СТАТЬЯ МОЖЕТ НЕ ВСЕМ БУДЕТ ПОНЯТНА. СНАЧАЛА ВЫЛОЖУ ВЕСЬ ИСХОДНИК ТОГО, ЧТО УСПЕЛ СДЕЛАТЬ. Яндекс диск ссылка В ПАПКЕ WWW ВЕСЬ ИСХОДНИК С TPL ФАЙЛАМИ
Сам редактор находится в админке, в файле admin.php . Установите Denwer запустите админку для наглядности.
Написать сам редактор было не так сложно. Написал функцию вывода файлов из корня сайта и всех папок, рекурсивным методом. И добавил функцию вывода содержимого файла в textarea, с помощью file_get_contents() и вроде все работало. Сохранение содержимого через file_put_contents() с последующим обноврением страницы редактора, НО.
Косяк был в том, что если я загружаю для редактирования файл сайта, в котором используется этот самый textarea, в котором и происходит редактирование файлов. в редактор загружалась только часть кода, до закрывающего тега textarea. Остальная часть редактируемого файла вливалась в код страницы редактора.
Подробнее в картинках ниже:
1. То как реализован редактор. Выводим в textarea содержимое файла с помощью функции.
2. То что содержит функция вывода после того, как прочитала файл редактора.
3. То что видно в исходном коде редактора, когда загружен файл для редактирования его кода.
4. Кусок кода, который отображается в самом редакторе, в textarea.
Из скринов видно, что часть кода прочитана браузером именно до строки закрытия злосчастного textarea. Итог, очевиден, редактор отображается с косяком, и если сохранить то что оказалось в редакторе, редактор перестанет работать, так как там будет только часть нужного кода.
Решение проблемы реализовал обычной заменой конечного тега textarea на сложное выражение вида, к примеру: \.*-+*-*06textarea-*/+*-+*/+\. Функцией str_replace() .
То есть, когда загружаем файл для обработки и правки кода, читаем его в переменную, проходим функцией str_replace() , заменяем нужное на странное выражение. В итоге редактор выдаст:
А при сохранении отредактированного кода в рабочий файл, делаем обратную процедуру. И файл, который будет отображаться на вашем сайте будет с нормальным конечным тегом textarea. Метод не лучший но, на худой конец и то решение.
Блокирование элементов форм
У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).
Блокирование
Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. К тому же такие поля не отправляются на сервер.
Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.
На рис. 1 представлены разные элементы форм в заблокированном состоянии.
Рис. 1. Вид заблокированных элементов в Chrome
Для блокирования элемента формы используется атрибут disabled . Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его.
Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 1 показано применение скриптов для изменения блокировки кнопки.
Пример 1. Блокирования поля
HTML5 IE Cr Op Sa Fx
Блокировка поля
Я согласен со всеми условиями
Результат данного примера в Safari показан ниже (рис. 2).
Рис. 2. Заблокированное текстовое поле
В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».
Поле только для чтения
Поля формы можно не только блокировать, но и переводить их в режим только для чтения. В этом случае доступ к ним сохраняется, но изменять значения заданные по умолчанию нельзя. Разумеется, речь идёт только о полях, где требуется вводить текст. Выделять и копировать текст можно, но изменить не получится.
Для установки режима «только для чтения» используется атрибут readonly , он добавляется к тегу или . На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся.
Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».
В примере 2 показано создание поля для чтения.
Пример 2. Использование readonly
HTML5 IE Cr Op Sa Fx
Поле для чтения