如何实现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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
采用call方式实现js继承
May 20 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
引用外部脚本时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 5.0创建图形的巧妙方法
2010/10/12 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
js内置对象 学习笔记
2011/08/01 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
python语言元素知识点详解
2019/05/15 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python安装Bs4的多种方法
2020/11/28 Python
python中spy++的使用超详细教程
2021/01/29 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
博士生求职信
2014/07/06 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书