需求场景
前端有时候需要展示日志，用textarea，也可以用div。 用div设置可编辑属性确实可以做到，但是这表现的并不完全像textarea，总之，不想用div替代。如果用 textarea，需要根据里面的文本内容不同，去展示不同的颜色！不过浏览器兼容性没那么好。
如果是控制textarea的style，则所有文本都是一个颜色；如果把文本放到标签里面，也不会起作用，因为标签在文本域组件里面不会去解释，直接当做文本处理了。
解决方案
如果这个需要在同一个文本域里面显示不同颜色的的字体，比如warn 告警是黄色，error错误显示为红色。
大概思路有两种 ，有一种类似谷歌翻译那种，在上面再覆盖一层DIV
现在我要介绍的是一种较为简单的土方法。
先是引入高亮的脚本
<script src="dist/jquery/jquery.min.js"></script>
<script src="dist/jquery-ui/jquery-ui.min.js"></script>
<script src="dist/jquery-highlighttextarea/jquery.highlighttextarea.js"></script>引入样式
<link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css">
<link rel="stylesheet" href="dist/jquery-highlighttextarea/jquery.highlighttextarea.min.css">只需highlightTextarea在jQuery对象上调用。
$(/* selector */).highlightTextarea({
/* options */
});例如:
<textarea cols="50" rows="5">...</textarea>
<script>
$('textarea').highlightTextarea({
words: ['Lorem ipsum', 'vulputate']
});
</script>还有一条
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<style type="text/css">
.in, .out {
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #ccc;
width: 350px;
height: 100px;
left: 10px;
top: 10px;
font-size: 14px;
z-index: 3;
}
.in {
outline: none;
z-index: 2;
color: black !important;
text-shadow: 0px 0px 0px #fff;
-webkit-text-fill-color: transparent;
}
.out {
background-color: transparent;:
}
</style>
<textarea class="in" id='inaa' oninput='inputFunc()' style="width: 350px; height: 100px;"></textarea>
<div id='put' class="out" onclick='inaa.focus()'>
</div>
<script type="text/javascript">
function inputFunc (value) {
// console.log(value)
console.log(inaa.value)
let spans = document.createElement('span')
spans.innerHTML = '哈哈'
spans.style.color = 'red'
put.innerHTML = inaa.value.replace(/哈哈/g, '<span style="color: red;">哈哈</span>')
}
</script>
</div>
</body>
</html>
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/How%20does%20the%20front%20end%20display%20different%20colors%20for%20different%20texts%20in%20the%20textarea.html
支付宝扫一扫 
评论列表（196条）
测试