Поведение textarea innerHTML

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

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

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
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    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
<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    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
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 **[ТС]**

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

Странно же)

Новые блоги и статьи Все статьи Все блоги /
Работа с объемным DOM в javascript Htext 04.04.2025 Сегодня прочитал статью тут о расходах памяти в JS, ее утечках и т. п. И вот что вспомнил из своей недавней практики. Может, кому пригодится. Хотя, в той статье об этом тоже есть. Дело в том, что я. . .	Оптимизация производительности Node.js с помощью кластеризации run.dev 04.04.2025 Масштабирование приложений для обработки тысяч и миллионов запросов — обыденная задача для многих команд. Node. js, благодаря своей асинхронной событийно-ориентированной архитектуре, стал популярной. . .	Управление зависимостями в Python с Poetry py-thonny 04.04.2025 Стандартный инструмент для установки пакетов в Python - pip - прекрасно справляется с базовыми сценариями: установил пакет командой pip install и используешь его. Но что произойдёт, когда разные. . .	Мониторинг с Prometheus в PHP Jason-Webb 04.04.2025 Prometheus выделяется среди других систем мониторинга своим подходом к сбору и хранению метрик. В отличие от New Relic, который использует агентный подход и отправляет данные во внешнее хранилище,. . .	Пакет Context в Golang: Управление потоками и ресурсами golander 04.04.2025 Работа с горутинами в Go часто напоминает управление непослушными детьми - они разбегаются кто куда, делают что хотят и не всегда завершаются вовремя. К счастью, в Go 1. 7 появился пакет context,. . .
Контейнеризация React приложений с Docker Reangularity 03.04.2025 Контейнеризация позволяет упаковать приложение со всеми его зависимостями в автономный контейнер, который можно запустить на любой платформе с установленным Docker. Это существенно упрощает процессы. . .	Свой попап в SwiftUI mobDevWorks 03.04.2025 SwiftUI, как декларативный фреймворк от Apple, предоставляет множество инструментов для создания пользовательских интерфейсов. В нашем распоряжении есть такие API как alerts, popovers, action sheets. . .	Антипаттерны микросервисной архитектуры ArchitectMsa 03.04.2025 Хорошо спроектированная микросервисная система может выдержать испытание временем, оставаясь гибкой, масштабируемой и устойчивой к большинству проблем. Такая архитектура обладает высоким уровнем. . .	std::mutex в C++: Советы и примеры использования bytestream 03.04.2025 std::mutex - это механизм взаимного исключения, который гарантирует, что критический участок кода выполняется только одним потоком в каждый момент времени. Это простое, но могущественное средство. . .	Не удержался от оценки концепции двигателя Стирлинга. Hrethgir 03.04.2025 Сколько не пытался - она выдавала правильные схемы, причём случайно рисовала горячие области в середине, холодные по краям, трубки с краёв в низ и магнит в соединяющей, но при этой выдавала описание. . .

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

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

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

Поведение textarea innerHTML

Решение