如何实现textarea里的不同文本显示不同颜色

156 阅读 0 评论 103 点赞

我是靠谱客的博主失眠缘分，最近开发中收集的这篇文章主要介绍如何实现textarea里的不同文本显示不同颜色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如何实现textarea里的不同文本显示不同颜色呢？如果是控制textarea的style，则所有文本都是一个颜色；

如果把文本放到标记里，也不会起作用，是因为标记不会被解释，是当做文本处理的。

在网上找到了一个方法：

我把代码复制到txt中，并修改为html格式。测试起作用。html如下：

复制代码代码如下:

 
<html> 
<head> 
<title>ff</title> 
<Script Language="JavaScript"> 
function ta() 
{ 
//---------------------------- 
var oFont1=document.createElement("FONT"); 
var oText1=document.createTextNode('中国'); 
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> 