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