Javascript change font color when using textarea

Question

Is there a way to add different colors to the objects below... the way I'm doing is not working when I output to a textarea.

//Print out InputTextToSave 10
                document.getElementById('inputTextToSave10').innerHTML= 
                "Name" + "\n" + studentname.fontcolor("red").bold()
                + "Number " + studentnumber.fontcolor("blue").bold();

<textarea id="inputTextToSave10" style="width: 1300px; height: 857px; 
background-color: #333333; font-family: Arial; font-size: small; font-
weight: normal; color: #FFFFFF;"></textarea>

Alexa, you can not use different colors in the same textarea. — Viktor, Sep 01 '17 at 06:42
What are `studentname` and `studentnumber` ? You say it's not working. Do you get an error? — Adelin, Sep 01 '17 at 06:42
Similar post - https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea — Phani Kumar M, Sep 01 '17 at 06:46
You will need to switch from textarea to a contenteditable="true" div. — Salketer, Sep 01 '17 at 06:55
Possible duplicate of [Change color of specific words in textarea](https://stackoverflow.com/questions/37139076/change-color-of-specific-words-in-textarea) — Salketer, Sep 01 '17 at 06:55

score 1 · Accepted Answer · answered Sep 01 '17 at 06:54

.textarea_type_div{
  width: 1300px; 
  height: 857px; 
  background-color: #333333;
  font-family: Arial; font-size: small; 
  font-weight: normal; 
  color: #FFFFFF;
}

.textarea_type_div .studentname{
  font-weight:bold;
  color:red;
}

.textarea_type_div .studentnumber{
  font-weight:bold;
  color:blue;
}

<div class="textarea_type_div" contenteditable="true">
  <span class="studentname">Student Name</span>
  <span class="studentnumber">Student Number</span>
</div>

Instead of textarea you can make a div and give that div a property called contenteditable="true" and in that you can write and change the text color as per your need.

You can refer this link for more help

Also, You can use texteditor plugin such as The Yahoo RTE, the FCKEditor and the Lightweight RTE.

Hope this helps.

Javascript change font color when using textarea

1 Answers1