如何实现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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
vue实现列表垂直无缝滚动
Apr 08 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
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php创建图像具体步骤
2017/03/13 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
python提示No module named images的解决方法
2014/09/29 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Django框架 querySet功能解析
2019/09/04 Python
学校采购员岗位职责
2014/01/02 职场文书
物理教学随笔感言
2014/02/22 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Python实现学生管理系统(面向对象版)
2021/06/24 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python