字体颜色控制
0
悬赏园豆：50
[已解决问题]
解决于 2008-04-16 11:10
如何根据用户输入的内容，修改范文对应的文字颜色？例如我有范围内容为ABCDEFG，有一个输入困，用户输入ABCXEFG的时候，范文内容应该显示绿色的ABC红色的D绿色的EFG。如果用CSS控制如何控制呢？
最佳答案
0
好像能用……
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<html>
<head><style>.a{color:#0f0;} .b{color:#f00;}</style></head>
<body>
<div id="ha">ABCDEFG</div>
<input id="txt" value="" type="text" onkeyup="checkit(this)">
<script>
var h = document.getElementById("ha").innerHTML;
function checkit(obj){
var s = obj.value;
var r = "";
var i;
for(i=0;i<h.length && i<s.length;i++){
if(h.substring(i,i+1) == s.substring(i,i+1)){
r += '<span class="a">' + h.substring(i,i+1) + '</span>'
}
else{
r += '<span class="b">' + h.substring(i,i+1) + '</span>'
}
}
if(i<h.length){
r += h.substring(i);
}
document.getElementById("ha").innerHTML = r;
}
</script>
</body>
</html>
其他回答(1)
0
只用CSS肯定不行，肯定得用Javascript.
首先，把范文拆分成7个span,每个span一个字母.
在txtbox的onchange事件里，根据用户的输入，判断范文里每个span应该是什么颜色，然后设置相应span.style.color属性为相应的颜色.
