如何实现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之Ajax运用 学习运用篇
Sep 26 Javascript
jquery 插件学习(五)
Aug 06 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
Node.js模块加载详解
Aug 16 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
学习javascript文件加载优化
Feb 19 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 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生成html分页列表的代码
2007/03/18 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
python实现网页录音效果
2020/10/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
python解包用法详解
2021/02/17 Python
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
党员干部承诺书
2014/03/25 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
小学家长通知书评语
2014/12/31 职场文书
入党申请书怎么写?
2019/06/21 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书