Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Елемент contenteditable="true" [цветной спан в редактируемый div] (https://javascript.ru/forum/css-html/81856-element-contenteditable%3D-true-%5Bcvetnojj-span-v-redaktiruemyjj-div%5D.html)

fori 07.02.2021 00:35

Елемент 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>

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

voraa 07.02.2021 06:48

<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>

fori 07.02.2021 17:03

Спасибо за помощь, работает)), можно пожалуйста вопрос, как сделать чтоб спан текста появлялся перед введенный текстм от пользователя
Тоесть так
<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:23

Спасибо))


Часовой пояс GMT +3, время: 11:06.