如何实现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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
Openlayers实现图形绘制
Sep 28 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
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
详细分析python3的reduce函数
2017/12/05 Python
Python对excel文档的操作方法详解
2018/12/10 Python
OpenCV 边缘检测
2019/07/10 Python
Python numpy数组转置与轴变换
2019/11/15 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
行政专员工作职责
2013/12/22 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
志愿者服务感言
2014/02/27 职场文书
洗发露广告词
2014/03/14 职场文书
绿色学校实施方案
2014/03/31 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书