如何实现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限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
树结构之JavaScript
Jan 24 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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
php5.2.0内存管理改进
2007/01/22 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
JQuery切换显示的效果实例代码
2013/02/27 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python MySQLdb使用教程详解
2018/03/20 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python实现自主查询实时天气
2018/06/22 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python做反被爬保护的方法
2019/07/01 Python
详解Django CAS 解决方案
2019/10/30 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
八年级生物教学反思
2014/01/22 职场文书
艺术节主持词
2014/04/02 职场文书
奖学金个人总结
2015/03/04 职场文书
复兴之路观后感
2015/06/02 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
详解如何使用Nginx解决跨域问题
2022/05/06 Servers