如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色

2019-11-20 21:13:33

字體：大中小

供稿：網(wǎng)友

如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？如果是控制textarea的style，則所有文本都是一個(gè)顏色；

如果把文本放到標(biāo)記里，也不會(huì)起作用，是因?yàn)闃?biāo)記不會(huì)被解釋，是當(dāng)做文本處理的。

在網(wǎng)上找到了一個(gè)方法：

我把代碼復(fù)制到txt中，并修改為html格式。測(cè)試起作用。html如下：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<title>ff</title> 
<Script Language="JavaScript"> 
function ta() 
{ 
//---------------------------- 
var oFont1=document.createElement("FONT"); 
var oText1=document.createTextNode('中國(guó)'); 
oFont1.style.color="black"; 
form1.topic.appendChild(oFont1); 
oFont1.appendChild(oText1); 
//---------------------------- 
var oFont2=document.createElement("FONT"); 
var oText2=document.createTextNode('人民'); 
oFont2.style.color="#ff3322"; 
form1.topic.appendChild(oFont2); 
oFont2.appendChild(oText2); 
//---------------------------- 
var oFont3=document.createElement("FONT"); 
var oText3=document.createTextNode('解放/r'); 
oFont3.style.color="#00eeff"; 
form1.topic.appendChild(oFont3); 
oFont3.appendChild(oText3); 
//---------------------------- 
var oFont4=document.createElement("FONT"); 
var tex = "哈哈的哈哈的軍人"; 
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="提交" onClick="ta()"> 
</form> 
</body> 
</html> 