如何实现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 相关文章推荐
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
给js文件传参数(详解)
Jul 13 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
js生成随机数方法和实例
Jan 17 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
vue2单元测试环境搭建
May 24 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
晶体管来复再生式二管收音机
2021/03/02 无线电
xml+php动态载入与分页
2006/10/09 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
javascript运动详解
2015/07/06 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
vuejs事件中心管理组件间的通信详解
2017/08/09 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
管理科学大学生求职信
2013/11/13 职场文书
你会写请假条吗?
2019/06/26 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL