大家好，欢迎来到IT知识分享网。
需求场景
前端有时候需要展示日志，用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>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/88242.html
