How to style every word with different color using javascript?

Question

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

Possible duplicate of [Is it possible to have several different textcolors in one textarea?](http://stackoverflow.com/questions/3435167/is-it-possible-to-have-several-different-textcolors-in-one-textarea) — Randi Ratnayake, Apr 18 '17 at 00:32

Aren Hovsepyan · Accepted Answer · 2017-04-18T00:40:54.997

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.

Is it possible to apply color when the user is inputting in the `contenteditable` element? — Sai Velamuri, Apr 18 '17 at 09:03
Yes, you can create logic so that it will change color of new text — Aren Hovsepyan, Apr 18 '17 at 16:46

score 1 · Answer 2 · answered Apr 18 '17 at 07:44

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>

score 0 · Answer 3 · answered Apr 18 '17 at 00:31

0

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.

answered Apr 18 '17 at 00:31

Randi Ratnayake

674
9
23

@can we do it using a text area? – Sai Velamuri Apr 18 '17 at 00:56
Unfortunately not with plain old HTML controls. You need to use a third party library such as http://ckeditor.com and Inline Editing. – Randi Ratnayake Apr 18 '17 at 01:14
2

@RandikaRatnayake: No, you do not *need* to use a third party library, they are doing the same thing suggested by Aren's answer, using `contenteditable`. – Amadan Apr 18 '17 at 01:59
Agree. Do someone needs to reinvent the wheel when there are readily available components :) – Randi Ratnayake Apr 18 '17 at 04:31

How to style every word with different color using javascript?

3 Answers3