HTML如何在TextArea中显示不同颜色的文字？
作者：程序员11 时间：2021-11-09 人气：822 QQ交流群\邮箱:1003265987@qq.com
textarea标签本身无法改变部分字体颜色，我们可以使用div模拟textarea标签。
contentEditable=‘true’ 表示开启对应元素的编辑模式。
要展示的内容
在HTML中的使用
<html>
<head>
<title>ff</title>
<Script Language="JavaScript">
function ta()
{
//----------------------------
var topic = document.getElementById('test');
console.log(topic);
//----------------------------
var oFont1=document.createElement("FONT");
var oText1=document.createTextNode('中国');
oFont1.style.color="black";
topic.appendChild(oFont1);
oFont1.appendChild(oText1);
//----------------------------
var oFont2=document.createElement("FONT");
var oText2=document.createTextNode('人民');
oFont2.style.color="#ff3322";
topic.appendChild(oFont2);
oFont2.appendChild(oText2);
//----------------------------
var oFont3=document.createElement("FONT");
var oText3=document.createTextNode('解放
');
oFont3.style.color="#00eeff";
topic.appendChild(oFont3);
oFont3.appendChild(oText3);
//----------------------------
var oFont4=document.createElement("FONT");
var tex = "哈哈的哈哈的军人";
var oText4=document.createTextNode(tex);
oFont4.style.color="#00ee00";
topic.appendChild(oFont4);
oFont4.appendChild(oText4);
}
</Script>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
<div contentEditable='true' id="test" style="width:100px"></div>
<input type="button" value="提交" onClick="ta()">
</form>
</body>
</html>在vue中的使用
<view class="content">
<span class="icon iconfont"></span>
<font class="send" color="red">张三</font>
打赏
<font>李四1111sssssssssssssssssssssssssss111111</font>
<font>0.5元</font>
</view>
.content {
width: 100%;
font-size: 28upx;
word-break: break-all;//这个必须写不然不会换行
}
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
HTML如何在TextArea中显示不同颜色的文字？---相关文章
HTML5-热门文章
活跃用户
