Слова окрашиваются после нажатия клавиши пробела на клавиатуре. Я хотел бы раскрасить их сразу после последней буквы. ⇐ CSS

[Anonymous]

У меня возникла проблема со сценарием Javascript для раскрашивания текста. Есть строки для раскрашивания, но слово окрашивается только тогда, когда я нажимаю клавишу «пробел» на клавиатуре. Если я пишу слово, оно не окрашивается. Если я напишу слово и нажму клавишу пробела, оно станет цветным.

Я хотел бы раскрасить слово сразу же, как я его пишу, не дожидаясь нажатия кнопки пробела. Например, я установил, что HELLO должен быть окрашен. Я бы хотел, чтобы он окрашивался сразу, как только я нажимаю последнюю кнопку O, а не когда я набираю HELLO (с последним пробелом).

Проблема возникает при попытке вручную написать что-либо на панели кода, например, если вы пишете Hello. Проблема заключается в функции changeColor(), там есть Событие нажатия клавиши и Нажатие клавиши пробела.

Я пытался удалить часть кода, касающуюся EventListener("keyup"... и кода ключа, но все ломается и не работает. Я новичок в Javascript, не могу решить эту проблему.< /п> index.html

Это заголовок Это абзац.
ПРОСМОТР
style.css

#editor { ширина: 400 пикселей; высота: 100 пикселей; отступ: 10 пикселей; цвет фона: #444; белый цвет; размер шрифта: 14 пикселей; семейство шрифтов: моноширинный; пробел: pre; } .заявление { оранжевый цвет; } javascript.js
function applyColoring(element) { var ключевые слова = ["DIV", "DIV", "H1", "H1", "P", "P", "HELLO", "", "/"]; вар newHTML = ""; // Проходим по словам стр = element.innerText; (куски = ул .split(new RegExp(keywords.map((w) => `(${w})`).join("|"), "i")) .filter(логическое значение)), (разметка = chunks.reduce((acc, chunk) => { acc += ключевые слова.includes(chunk.toUpperCase()) ? `${chunk` : `${chunk`; возврат акк; }, "")); element.innerHTML = разметка; } // ИЗМЕНИТЬ ЦВЕТ функция изменения цвета() { // Событие нажатия клавиши document.querySelector("#editor").addEventListener("keyup", (e) => { // Нажата клавиша пробела если (e.keyCode == 32) { applyColoring(e.target); // Устанавливаем позицию курсора в конец текста // document.querySelector('#editor').focus() вар ребенок = e.target.children; диапазон вар = document.createRange(); вар сел = window.getSelection(); range.setStart(child[child.length - 1], 1); диапазон.коллапс (истина); sel.removeAllRanges(); sel.addRange(диапазон); это.фокус(); } }); } изменить цвет() applyColoring(document.getElementById('editor')); //ПРОСМОТР функция showPreview() { var editor = document.getElementById("editor").innerText; // вар cssCode = // "" + document.getElementById("cssCode").value + ""; // вар jsCode = // "" + document.getElementById("jsCode").value + ""; varframe = document.getElementById("окно предварительного просмотра").contentWindow.document; document.getElementById("окно предварительного просмотра").srcdoc = редактор; рамка.открыть(); //frame.write(htmlCode + cssCode + jsCode); Frame.write(редактор); рамка.закрыть(); } шоуПредварительный просмотр()