如何实现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 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
javascript 实现map集合
Apr 03 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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中随机显示图片的函数代码
2011/06/23 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
PHP实现倒计时功能
2020/11/16 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 实现插入排序算法
2012/06/05 Python
python插入数据到列表的方法
2015/04/30 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python实现月食效果实例代码
2019/06/18 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
预备党员党课思想汇报
2014/01/13 职场文书
青年志愿者活动总结
2014/04/26 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
节约用水的口号
2014/06/20 职场文书
优秀党员推荐材料
2014/12/18 职场文书