如何实现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的Document属性和方法小结
Sep 17 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 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
优化使用mysql存储session的php代码
2008/01/10 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php检测useragent版本示例
2014/03/24 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
佳能德国网上商店:Canon德国
2017/03/18 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
初中化学教学反思
2014/01/23 职场文书
开会迟到检讨书
2014/02/03 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python