textarea 实现关键字变色

qq_41213315

已于 2022-05-24 15:10:57 修改

阅读量8.8k

点赞数 3

文章标签： javascript 前端 html

于 2018-10-18 11:41:15 首次发布

本文链接：https://blog.csdn.net/qq_41213315/article/details/83144204

版权

<!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) {
			 put.innerHTML = inaa.value.replace(/哈哈/g, '<span style="color: red;">哈哈</span>').replace(/嘿嘿/g, '<span style="color: orange;">嘿嘿</span>').replace(/绿色/g, '<span style="color: green;">绿色</span>').replace(/绿色/g, '<span style="color: green;">绿色</span>').replace(/红色/g, '<span style="color: red;">红色</span>').replace(/蓝色/g, '<span style="color: aqua;">蓝色</span>')
			}
		</script>
	</div>
</body>
</html>

大体就是这样先贴上代码