My code is converting entire input to single color, but not individual colors to individual words. Here is my fiddle where only red gets applied to entire input. Test Input: hi hello etc. When I clear the input field, the last color is applied to the first word but not the red color. The function is
function func(e){ var content = text.innerHTML; if( e.keyCode === 32){ text.style.color = colors[i++]; } } Here is the fiddle : Fiddle Link
Unfortunately input tag words can't have different colors, since text and input are not separate elements, but for other elements you can wrap each word into span and add style to them, that is how rich content editors are working.
Assume you have <p id="paragraph">Here are few words</p> and you want to add different colors to each word.
You can split innerText of #paragraph and create span for each word and insert result as innerHTML of #paragraph.
Here is example
var paragrapgh = document.getElementById("paragraph"); var words = paragrapgh.innerText.split(" "); // here I am spliting words by space i.e tokenizing it var colors = ["red","green","blue","pink", "gold", "yellow", "blueviolet"]; var spans = []; for(var x = 0; x < words.length; x++){ var color = colors[Math.floor(Math.random()*colors.length)] // geting random color from array; var span = "<span style='background-color: " + color + ";'>" + words[x] + "</span>" spans.push(span); } // setting colored spans as paragraph HTML paragrapgh.innerHTML = spans.join(" ");<p id="paragraph">Here are few words</p>Also you can use contenteditable attribute to elements to allow users to edit content of element as it is input.
So you can try to use contenteditable div with keyup event and make your styling of words.
contenteditable element?
Using div you can kind of achieve it. The below code has few issues like caret position
var text = document.getElementById('text'); var newWord = ''; var colors = ["red", "green", "blue", "darkpink"]; var prevValue = ''; var i = 0; text.addEventListener("keyup", function(event) { func(event) }); function func(e) { newWord = newWord + e.key; if (e.keyCode === 32) { prevValue = text.innerHTML = prevValue + '<span style="color:' + colors[i++] + '">' + newWord + '</span>'; newWord = ''; if (i == 3) { i = 0; } } }#text { border: 1px solid grey; background-color: white; width: 200px; white-space: nowrap; overflow: hidden; }<div id="text" class="highlight" contenteditable="true"> </div>The simple answer: You cannot; styles will apply to the whole input only. If you want to achieve this you need a control that support Rich Text Editing.
contenteditable.