Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2021, 00:35
Аспирант
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 81

Елемент contenteditable="true" [цветной спан в редактируемый div]
Здраствуйте, подскажите пожалуйста как вставить цветной спан в редактируемый див. Мой код работает однако спанвставляется как текст а не спан
<div id="mydiv" contenteditable="true" tabindex="0"></div>
<style>
div{
width:25%;
height:25%;
background: green;
word-wrap: break-word;
overflow-y: auto;
}
span{
color: red;
}
</style>
<script>
document.getElementById("mydiv").addEventListener('keyup', event => {
document.getElementById("mydiv").append("<span style='color:red;'>red</span>");
}, true);
</script>

можно ли сделать какойто спан не редактируемым в редактироумом диве?

Последний раз редактировалось fori, 07.02.2021 в 00:41.
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2021, 06:48
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,101

<div id="mydiv" contenteditable="true" tabindex="0"></div>
<style>
div{
width:25%;
height:25%;
background: green;
word-wrap: break-word;
overflow-y: auto;
}
span{
color: red;
}
</style>
<script>
document.getElementById("mydiv").addEventListener('keydown', event => {
	document.getElementById("mydiv").insertAdjacentHTML('beforeend',"<span style='color:red;'>red</span>");
	event.preventDefault();
});
</script>


<div id="mydiv" contenteditable="true" tabindex="0"></div>
<style>
div{
width:25%;
height:25%;
background: green;
word-wrap: break-word;
overflow-y: auto;
}
span{
color: red;
}
</style>
<script>
document.getElementById("mydiv").addEventListener('keydown', event => {
	let sp = document.createElement('span')
	sp.textContent = 'red'
	sp.classList.add('red')
	document.getElementById("mydiv").append(sp);
	event.preventDefault();
});
</script>

Последний раз редактировалось voraa, 07.02.2021 в 06:54.
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2021, 17:03
Аспирант
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 81

Спасибо за помощь, работает)), можно пожалуйста вопрос, как сделать чтоб спан текста появлялся перед введенный текстм от пользователя
Тоесть так
<div id="mydiv" contenteditable="true" tabindex="0">"Enter"</div>
<style>
div{
width:25%;
height:25%;
background: green;
word-wrap: break-word;
overflow-y: auto;
}
.sp{
color:red;
}
</style>
<script>
document.getElementById("mydiv").addEventListener('keydown', event => {
	document.getElementById("mydiv").insertAdjacentHTML('afterbegin',"<span class='sp' contenteditable='false'>red</span>");
});
</script>

только вместо "Enter" перевод строки вниз — \n\r не работает

Ответ: перевед строки и каретки — <br></br>

Последний раз редактировалось fori, 07.02.2021 в 17:18.
Ответить с цитированием
  #4 (permalink)  
Старый 07.02.2021, 17:23
Аспирант
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 81

Спасибо))

Последний раз редактировалось fori, 07.02.2021 в 18:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите найти файл где поменять елемент. 4ugivara jQuery 1 30.10.2014 16:00
Выбрать первый дочерний елемент относительно вызываемого Sity jQuery 1 11.10.2014 16:06
проверка, виделена ли какои нибудь радио елемент dadli Общие вопросы Javascript 5 24.02.2012 10:11
Два HTML тега <td>, между которых нужно вставить елемент Bebarr Swallow Events/DOM/Window 2 23.05.2011 16:11
появляеться и сразу исчезает добавленный елемент kamushek Events/DOM/Window 4 04.09.2010 12:28