How to display different colors for different text in a textarea

  • 2020-03-30 01:23:23
  • OfStack

How do you implement different colors for different text in a textarea? If the style controls the textarea, then all text is the same color.

If you put text in a tag, it won't work because the tag won't be interpreted and is treated as text.

Found a way online:

I copied the code into TXT and changed it to HTML format. Testing works. HTML is as follows:
 
<html> 
<head> 
<title>ff</title> 
<Script Language="JavaScript"> 
function ta() 
{ 
//---------------------------- 
var oFont1=document.createElement("FONT"); 
var oText1=document.createTextNode(' China '); 
oFont1.style.color="black"; 
form1.topic.appendChild(oFont1); 
oFont1.appendChild(oText1); 
//---------------------------- 
var oFont2=document.createElement("FONT"); 
var oText2=document.createTextNode(' The people's '); 
oFont2.style.color="#ff3322"; 
form1.topic.appendChild(oFont2); 
oFont2.appendChild(oText2); 
//---------------------------- 
var oFont3=document.createElement("FONT"); 
var oText3=document.createTextNode(' liberation r'); 
oFont3.style.color="#00eeff"; 
form1.topic.appendChild(oFont3); 
oFont3.appendChild(oText3); 
//---------------------------- 
var oFont4=document.createElement("FONT"); 
var tex = " Lol lol soldiers "; 
var oText4=document.createTextNode(tex); 
oFont4.style.color="#00ee00"; 
form1.topic.appendChild(oFont4); 
oFont4.appendChild(oText4); 
} 
</Script> 
</head> 
<body> 
<form name="form1" action="" method="post"> 
<textarea id="test" name="topic" rows="10" cols="40"></textarea> 
<input type="button" value=" submit " onClick="ta()"> 
</form> 
</body> 
</html> 

Copy the above code into a TXT, and then change the TXT file to an HTML file, such as to a.html, open with a browser, click the "submit" button, the operation results are as follows:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201401/201401201631161.gif? 2014020163156 ">

Related articles: