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


Posted in Javascript onJanuary 20, 2014

如何实现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>

将上述代码复制到一个txt中,然后把txt文件改为html文件,例如改为a.html,用浏览器打开,点击“提交”按钮后,运行结果如下:

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

Javascript 相关文章推荐
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
js编写的treeview使用方法
Nov 11 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
JavaScript组合继承详解
Nov 07 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 #Javascript
用jquery写的一个万年历(自写)
Jan 20 #Javascript
js控制input框只读实现示例
Jan 20 #Javascript
js给页面加style无效果的解决方法
Jan 20 #Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 #Javascript
js报$ is not a function 的问题的解决方法
Jan 20 #Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 #Javascript
You might like
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
p5.js实现简单货车运动动画
2019/10/23 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
解决pip install psycopg2出错问题
2020/07/09 Python
python调用摄像头的示例代码
2020/09/28 Python
Java的基础面试题附答案
2016/01/10 面试题
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
入党思想汇报
2014/01/05 职场文书
婚礼新人答谢词
2015/01/04 职场文书
会议主持人开场白台词
2015/05/28 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
python Django框架快速入门教程(后台管理)
2021/07/21 Python