Поведение textarea innerHTML

@vino0s · Регистрация: 26.03.2014

Author24 — интернет-сервис помощи студентам

Javascript

function AddSmile(sm) {
    var txt = document.getElementById("textfield").innerHTML;
    if (sm == ':)') {
    txt = txt + '<b class="smile" style="background-image: url(img/smile/smile1.png);"></b>';}
    if (sm == ';)') {
    txt = txt + '<b class="smile" style="background-image: url(img/smile/smile2.png);"></b>';}
}

HTML5

<div id="openModal" class="modalDialog">
        <textarea id="textfield" name="comment" cols="40" rows="3"></textarea>
</div>
 
        <div>
            <a href="#openModal" onclick="AddSmile(':)')" class="smile1"></a>
            <a href="#openModal" onclick="AddSmile(';)')" class="smile2"></a>
    </div>

Основные элементы показал, происходит все так:
открываю окно ввода openModal, имеется 2 ссылки запускающие по клику функцию AddSmile(txt) с текстовым параметром,в результате в поле textarea добавляется "смайлик" - строка HTML.
Проблема - Открыл openModal кликаю по смайликам 1 и 2, они добавляются в textarea в виде необходимых строк. Добавляю в textarea какой-либо текст, кликаю по смайликам, текст остается прежним (смайл строки не добавляются).

@arcmag · 08.02.2016, 15:09

В textarea вместо innerHTML надо юзать value...

@vino0s · 08.02.2016, 18:24 **[ТС]**

Заменил innerHTML на value все заработало, кто расскажет в чем разница между ними?

Javascript

function AddSmile(sm) {
 
    if (sm == ':)') {
    document.getElementById("textfield").value = document.getElementById("textfield").value+ '<b class="smile" style="background-image: url(img/smile/smile1.png);"></b>';}
    if (sm == ';)') {
    document.getElementById("textfield").value = document.getElementById("textfield").value + '<b class="smile" style="background-image: url(img/smile/smile2.png);"></b>';}
}

И, кстати, использование переменной txt также не добавляло текст)

Добавлено через 2 часа 54 минуты
Вопрос по тому же textarea:
Ввожу текст, с переносом строки
Первая
Вторая
Затем передаю Весь текст в БД, но туда он записывается в строчку.
Хочу заменить все вхождения переноса каретки и переноса строки на перенос в HTML

Javascript

1	str = str.replace(/\r\n/g,"<br>");

делаю это при клике по кнопке отправляющей текст в БД (обрабатывается в php), а функция вызывающая замену записана в подключенном js и обрабатывается на кнопке

HTML5

1	onclick="ReplaceBR()"

@kalabuni · 08.02.2016, 18:56

Сообщение от vino0s

Заменил innerHTML на value все заработало, кто расскажет в чем разница между ними?

Рассказываю: и innerHTML, и value - это свойства
у плоских (plain)тегов есть свойство innerHTML, а у полей ввода - свойство value

это как длина стороны и диаметр
у квадрата есть длина стороны, а у окружности есть диаметр

вы пытались вычислить диаметр квадрата, и у вас, естественно, ничего не вышло
вам порекомендовали заменить диаметр на длину стороны

@vino0s · 08.02.2016, 22:53 **[ТС]**

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

Странно же)

Новые блоги и статьи
Откуда у float лишние цифры в конце дробной части. Представление чисел с плавающей точкой bytestream 25.01.2025 При разработке программного обеспечения часто возникает необходимость работать с вещественными числами, которые содержат дробную часть. В современных компьютерных системах такие числа представляются. . .	Как использовать глобальную переменную в функции в Python bytestream 25.01.2025 В программировании на Python глобальные переменные представляют собой особый тип переменных, которые доступны для использования во всех частях программы, включая различные функции, классы и модули. . . .	Как в цикле обойти все элементы map в Java bytestream 25.01.2025 В разработке на Java одной из наиболее востребованных структур данных является интерфейс Map, который предоставляет эффективный способ хранения и управления парами "ключ-значение". Разработчики. . .	Для чего нужен UserManager.isUserAGoat() в Android и как это использовать bytestream 25.01.2025 В мире Android-разработки существует множество интересных и порой загадочных функций, о которых знают далеко не все разработчики. Одной из таких функций является метод UserManager. isUserAGoat(),. . .	Как обойти масси в JavaScript. Всё о циклах bytestream 25.01.2025 JavaScript представляет собой мощный язык программирования, широко используемый в веб-разработке, где массивы и циклы являются фундаментальными концепциями для эффективной работы с данными. Массив в. . .	Как сделать, чтобы существующая ветка отслеживала удалённую в Git. Связывание локальных и удалённых веток bytestream 25.01.2025 В разработке программного обеспечения системы контроля версий стали неотъемлемой частью процесса создания качественного программного продукта. Эти инструменты позволяют разработчикам эффективно. . .
Как проверить, что файл НЕ существует с помощью Bash bytestream 25.01.2025 В системном администрировании проверка существования файлов является фундаментальной операцией, особенно при написании скриптов на Bash. Правильная обработка ситуаций, когда файл отсутствует,. . .	Как проверить, что строка пустая, неопределена или null в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript разработчики регулярно сталкиваются с необходимостью проверки строковых значений на различные состояния. Валидация данных является критически важным. . .	Как проверить существование ключа в объекте или массиве в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript программисты постоянно сталкиваются с необходимостью работать с объектами и массивами. Эти структуры данных являются фундаментальными элементами языка и. . .	Как создать ArrayList из массива (array) в Java bytestream 25.01.2025 При разработке программного обеспечения на языке Java программисты часто сталкиваются с необходимостью эффективного управления наборами данных. Массивы и ArrayList являются двумя фундаментальными. . .	Как сгенерировать случайные целые числа (int) в указанном диапазоне в Java bytestream 25.01.2025 В программировании генерация случайных чисел является важнейшим инструментом для решения множества практических задач. От создания игровых механик до реализации алгоритмов машинного обучения, от. . .	Как сделать, чтобы grep выводил строки до и после найденной hw_wired 25.01.2025 Утилита grep стала незаменимым инструментом для поиска и фильтрации информации в Unix-подобных операционных системах. Эта командная утилита позволяет осуществлять поиск строк, соответствующих. . .

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	08.02.2016, 15:09	2
	Сообщение было отмечено vino0s как решение Решение В textarea вместо innerHTML надо юзать value... 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,626
	08.02.2016, 18:56	4
	Сообщение от vino0s Заменил innerHTML на value все заработало, кто расскажет в чем разница между ними? Рассказываю: и innerHTML, и value - это свойства у плоских (plain)тегов есть свойство innerHTML, а у полей ввода - свойство value это как длина стороны и диаметр у квадрата есть длина стороны, а у окружности есть диаметр вы пытались вычислить диаметр квадрата, и у вас, естественно, ничего не вышло вам порекомендовали заменить диаметр на длину стороны 0

@vino0s 11 / 11 / 8 Регистрация: 26.03.2014 Сообщений: 400
	08.02.2016, 22:53 [ТС]	5
	Но когда я сразу вычисляю диаметр, все получалось. А когда начинаю вводить стороны, уже диаметр не вычислялся Странно же) 0

Поведение textarea innerHTML

Решение