如何实现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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 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 CKEditor 上传图片实现代码
2009/11/06 PHP
php实现的SESSION类
2014/12/02 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
对layui中表单元素的使用详解
2018/08/15 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
华为C++笔试题
2014/08/05 面试题
策划助理岗位职责
2013/11/18 职场文书
影视制作岗位职责
2013/12/04 职场文书
社区安全检查制度
2014/02/03 职场文书
会计岗位描述
2014/02/22 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
社区活动总结报告
2014/05/05 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
读群众路线的心得体会
2014/09/03 职场文书
要账委托书范本
2014/09/15 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
Python字符串常规操作小结
2022/04/03 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL