如何实现textarea里的不同文本显示不同颜色

如何实现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，用浏览器打开，点击“提交”按钮后，运行结果如下：

赞 (0)

相关推荐

  • 如何实现textarea里的不同文本显示不同颜色

    如何实现textarea里的不同文本显示不同颜色

    如何实现textarea里的不同文本显示不同颜色呢?如果是控制textarea的style,则所有文本都是一个颜色: 如果把文本放到标记里,也不会起作用,是因为标记不会被解释,是当做文本处理的. 在网上找到了一个方法: 我把代码复制到txt中,并修改为html格式.测试起作用.html如下: 复制代码 代码如下: <html> <head> <title>ff</title> <Script Language="JavaScript"

  • 可以文本显示的公告栏的js代码

    一个可以文本显示的公告栏,可以在多处使用,绝对不可错过!  脚本说明:  第一步:把如下代码加入<head>区域中  <script language="JavaScript">  <!-- Activate Cloaking Device  var i = 0;  // used to cycle thru messages  var TextNumber = -1;  // array of messages  var TextInput = new 

  • 详解maxlength属性在textarea里奇怪的表现

    HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入600字(汉字和字母不区分),对于粘贴的内容也要能自动截断,输入600字后就无法输入. 第一时间想到了maxlength,基本满足需求,但还是有一些怪异的表现. 看下面的代码: <textarea name="text" id="text" maxlength=&

  • PHP获取一段文本显示点阵宽度和高度的方法

    本文实例讲述了PHP获取一段文本显示点阵宽度和高度的方法.分享给大家供大家参考.具体如下: define("F_SIZE", 8); define("F_FONT", "arial.ttf"); function get_bbox($text){ return imagettfbbox(F_SIZE, 0, F_FONT, $text); } function text_height ($text) { $box = get_bbox($text

  • python3.x+pyqt5实现主窗口状态栏里（嵌入）显示进度条功能

    1.代码1: (1)进度条等显示在主窗口状态栏的右端,代码如下: from PyQt5.QtWidgets import QMainWindow, QProgressBar, QApplication, QLabel import sys class SampleBar(QMainWindow): """Main Application""" def __init__(self, parent = None): print('Starting t

  • 解决Python print 输出文本显示 gbk 编码错误问题

    前阵子想爬点东西,结果一直提示错误UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position,在网上一查,发现是 Windows 的控制台的问题.控制台的编码是 GBK,Python 是 UTF-8,造成了冲突.下面给出三种解决方法. 第一种方法:直接替换出错的内容 import requests url = 'https://blog.csdn.net/jianhong1990/article/detail

  • 易语言设置鼠标移动到组件上时的文本显示颜色

    易语言设置鼠标移动到组件上时的文本显示颜色

    热点颜色属性 所属对象:超级链接框   操作系统支持:Windows,数据类型:整数型: 将整数型数据赋值到指定对象的热点颜色属性中 语法:对象.热点颜色 = 整数型 应用对象:超级链接框 例程 说明: 本属性设置鼠标移动到组件上时的文本显示颜色. 设置超级链接框的热点颜色为热点颜色选择器选择的颜色. 运行结果: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接

  • Python使用tkinter库实现文本显示用户输入功能示例

    Python使用tkinter库实现文本显示用户输入功能示例

    本文实例讲述了Python使用tkinter库实现文本显示用户输入功能.分享给大家供大家参考,具体如下: #coding:utf-8 from Tkinter import * class App: def __init__(self,root): #定义帧 frame = Frame(root) frame.pack() self.frame = frame w = Label(frame,text = "calculator") w.pack() self.newinput() #

  • jQuery实现文本显示一段时间后隐藏的方法分析

    本文实例讲述了jQuery实现文本显示一段时间后隐藏的方法.分享给大家供大家参考,具体如下: 点击button时,提示信息显示,8秒后,信息隐藏. <input id="place_order" name="place_order" type="submit" /> <div class="after_submit_remind" style="display: none;"> 请耐

  • C#在RichTextBox中显示不同颜色文字的方法

    本文实例讲述了C#在RichTextBox中显示不同颜色文字的方法.分享给大家供大家参考.具体实现方法如下: #region 日志记录.支持其他线程访问 public delegate void LogAppendDelegate(Color color, string text); /// <summary> /// 追加显示文本 /// </summary> /// <param name="color">文本颜色</param> /

随机推荐