如何实现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 学习之旅 (1)
Feb 05 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 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
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
Python验证码识别处理实例
2015/12/28 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python实现画一颗树和一片森林
2018/06/25 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Python 高效编程技巧分享
2020/09/10 Python
路政管理专业推荐信
2013/11/11 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
优秀员工推荐信
2014/05/10 职场文书
项目建议书范文
2014/05/12 职场文书
学校花圃的标语
2014/06/18 职场文书
队列队形口号
2015/12/25 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers
Java完整实现记事本代码
2022/06/16 Java/Android