Requirement scenarios
Sometimes the front end needs to display logs, use textarea or div. It is indeed possible to use div to set editable properties, but it does not behave exactly like textarea. In short, I don’t want to use div instead . If you use textarea, you need to display different colors according to the text content inside! However, browser compatibility is not so good.
If it is to control the style of the textarea, all the text is the same color; if the text is placed in the label, it will not work, because the label will not be interpreted in the text field component , directly treated as text.
Solution
If this needs to display fonts of different colors in the same text field, for example, the warn alarm is Yellow, error is displayed in red.
There are two general ideas, one is similar to Google Translate, and a layer of DIV is covered on it
Now what I want to introduce is a relatively simple soil method.
First introduce the highlighted script
<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>Introduction style
<link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css"><link rel="stylesheet" href="dist/jquery- highlighttextarea/jquery.highlighttextarea.min.css">Just call highlightTextarea on the jQuery object.
$(/* selector */).highlightTextarea({ /* options */});Example:
<textarea cols="50" rows="5">...</textarea><script> $('textarea').highlightTextarea({ words: ['Lorem ipsum' , 'vulputate'] });</script>There is one more
<!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 = 'haha'
spans.style.color = 'red'
put.innerHTML = inaa.value.replace(/haha/g, '<span style="color: red;">haha</span>')
}
</script>
</div>
</body>
</html>
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/How%20does%20the%20front%20end%20display%20different%20colors%20for%20different%20texts%20in%20the%20textarea.html
支付宝扫一扫 
评论列表（196条）
测试